jquery 按鈕狀態效果正常、移上、按下

2019-11-20 22:25:30

字體：大中小

來源：轉載

供稿：網友

在網頁設計過程中，經常遇見按鈕的各狀態效果。寫了一個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> 