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);

}
})(jQuery);

}
})(jQuery);

範例頁Default.aspx：複製程式碼

程式碼如下:

div>