In the process of web design, we often encounter the various status effects of buttons. Wrote a jquery extension to make this process more convenient!
Be sure to quote Jquery before use;
JqueryExtend.js:
(function ($) {
//Three styles of Button button replacement, if the isState parameter is True, the pressed state is recorded
$.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);
Sample page Default.aspx:
< %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryExtend_Default" %>
body>