jquery按钮状态效果正常、移上、按下_jquery



在网页设计过程中，经常遇见按钮的各状态效果。写了一个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" %>

$().ready(function () {
$("#aa,#bb").btnEffect("btn", "btn1", "btn2", true);
$("#cc").btnEffect("btn", "btn1", "btn2", false);
});