jquery 按钮状态效果正常、移上、按下-Web前端之家

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