在网页设计过程中，经常遇见按钮的各状态效果。写了一个jquery扩展，使这个过程更方便！

使用前注意引用Jquery；

JqueryExtend.js：

(function ($) {

// Button按钮的三种样式替换，如果isState参数为True则记录按下状态

    $.fn.btnEffect = function (normal, mouseover, mousedown, isState) {

        var lastButton;

        this.each(function () {

            $(this).bind({

                mouseover: function () {

                    if (this != lastButton || !isState) {

                        $(this).removeClass().addClass(mouseover)

                    }

                },

                mouseout: function () {

                    if (this != lastButton || !isState) {

                        $(this).removeClass().addClass(normal)

                    }

                },

                mousedown: function () {

                    if (this != lastButton || !isState) {

                        if (lastButton != null) {

                            $(lastButton).removeClass().addClass(normal);

                        }

                        $(this).removeClass().addClass(mousedown);

                        lastButton = this;

                    }

                }

            });

        });

    }

})(jQuery);

示例页面Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryExtend_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="../jquery-1.7.1.js" type="text/javascript"></script>

    <script src="JqueryExtend.js" type="text/javascript"></script>

    <style type="text/css">

        .btn

        {

            border: 0px;

            background: red;

        }

        .btn1

        {

            border: 0px;

            background: green;

        }

        .btn2

        {

            border: 0px;

            background: yellow;

        }

    </style>

    <script type="text/javascript">

        $().ready(function () {

            $("#aa,#bb").btnEffect("btn", "btn1", "btn2", true);

            $("#cc").btnEffect("btn", "btn1", "btn2", false);

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="aa" class="btn" type="button" value="按钮1" />

         <input id="bb" class="btn" type="button" value="按钮2" />

         <input id="cc" class="btn" type="button" value="按钮3" />

    </div>

    </form>

</body>

</html>

jquery 按钮效果 正常、移上、按下的更多相关文章

  1. JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

    $(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...

  2. jQuery隐藏和显示从上往下的实现方法

    jquery 显示隐藏方法实现动画效果 方向 显示 隐藏 左上角到右下角 show() hide() 垂直向下 slideDown() slideUp() 水平与垂直两个方向 toggle() 垂直向 ...

  3. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

  4. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  5. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  6. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  7. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  8. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

随机推荐

  1. 雅虎Yahoo 前段优化 14条军规

    Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的.请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS xhtml就好了,深刻认识到很多的东西需要学习的 ...

  2. Maven学习总结(四)——Maven核心概念--转载

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  3. Django基础——Form&Ajax篇

    一 Form 在实际的生产环境中,登录和注册时用户提交的数据浏览器端都会使用JavaScript来进行验证(比如验证输入是否为空以及输入是否合法),但是浏览器可能会禁用JavaScirpt,同时也有人 ...

  4. Ceph monitor故障恢复探讨

    1 问题 一般来说,在实际运行中,ceph monitor的个数是2n+1(n>=0)个,在线上至少3个,只要正常的节点数>=n+1,ceph的paxos算法能保证系统的正常运行.所以,对 ...

  5. C#--GDI+的LinearGradientBrush类

    命名空间:System.Drawing.Drawing2D LinearGradientBrush对象用颜色线性渐变填充图形.简言之,颜色渐变包含一种在两种指定的颜色之间渐变的颜色,渐变的方向是沿着指 ...

  6. C#中将结构类型数据存储到二进制文件中方法

    以往在vb6,vc6中都有现成的方法将结构类型数据写入和读取到二进制文件中,但是在c#中却没有现成的方法来实现,因此我查阅了一些资料,借鉴了网上一些同学的做法,自己写了个类似的例子来读写结构类型数据到 ...

  7. 七牛CEO许式伟：移动游戏资源存贮的大趋势

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 9月14日,eoe移动开发者大会正式在北京国家会议中心召开,七牛云储存CEO许式伟先生做了 ...

  8. ubuntu下安装Node.js（源码安装）

    最近使用hexo的过程中出现了问题,中间载nodejs安装的时候也耽误了些许时间,所以在此记录一下安装的过程. 环境:ubuntu14.0.4LTS,安装nodejs版本node-v0.10.36.t ...

  9. 39. Volume Rendering Techniques

    Milan Ikits University of Utah Joe Kniss University of Utah Aaron Lefohn University of California, D ...

  10. 菜鸟教程之工具使用（十二）——Eclipse突出显示选中的相同变量

    大家都知道在Eclipse中,选中一个变量或者方法名(或者说是一个单词),当前文件中跟他一样的变量会被突出显示,这个功能很好用.能让我们很方便的找到该变量在哪被用到了.前段时间我的Eclipse的这个 ...