jquery 按钮状态效果 正常、移上、按下
在过程中，经常遇见按钮的各状态效果。写了一个jquery扩展，使这个过程更方便！
使用前注意引用jquery；
jqueryextend.js：
. 代码如下:
(function ($) {
// button按钮的三种样式替换，如果isstate参数为true则记录按下状态
$.fn.btneffect = function (normal, mouver, 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.x：
. 代码如下:
<%@ 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">
<p>
<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" />
</p>
</form>
</body>
</html>