在网页设计过程中,经常遇见按钮的各状态效果。写了一个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:
复制代码 代码如下: