jquery 按鈕狀態(tài)效果正常、移上、按下

更新時間：2013年08月12日 11:37:20 作者：

按鈕的各狀態(tài)效果在網(wǎng)頁設計過程中經(jīng)常會遇到，下面寫個jquery擴展，使這個過程更加方便，感興趣的朋友可以了解下

在網(wǎng)頁設計過程中，經(jīng)常遇見按鈕的各狀態(tài)效果。寫了一個jquery擴展，使這個過程更方便！
使用前注意引用Jquery；
JqueryExtend.js：

 
(function ($) { 
// Button按鈕的三種樣式替換，如果isState參數(shù)為True則記錄按下狀態(tài) 
$.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> 

您可能感興趣的文章:

asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實現(xiàn)無刷新取后臺值的實現(xiàn)代碼，比頁面刷新更好，用戶體驗更好，需要的朋友可以參考下。
2010-09-09
Jquery幻燈片特效代碼分享打開頁面隨機選擇切換方式（3）
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，一個漂亮的幻燈片更能吸引訪客的注意力。本文實例講述了jQuery實現(xiàn)時尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果。分享給大家供大家參考。具體如下：
2015-08-08
jquery圖片延遲加載前端開發(fā)技能必備系列
在網(wǎng)上經(jīng)常會看到一些很長的網(wǎng)頁會延遲加載其中的圖片，我認為這是一種按需分配的做法，網(wǎng)頁只為那些想繼續(xù)瀏覽網(wǎng)頁的人加載后面的圖片，在不影響用戶體驗的前提下，最大程度地減少服務器負擔和流量
2012-06-06
jQuery實現(xiàn)簡單登錄條件判斷
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單登錄條件判斷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
JQuery選中checkbox方法代碼實例（全選、反選、全不選）
這篇文章主要介紹了JQuery選中checkbox方法代碼實例（全選、反選、全不選）,本文直接給出代碼實例,需要的朋友可以參考下
2015-04-04
基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
這篇文章主要介紹了基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件的相關資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧
2016-07-07
jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果,結合完整實例形式分析了FusionCharts插件2D餅狀圖繪制相關實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
使用jQuery卸載全部事件的思路詳解
本文是小編給大家?guī)淼膉query卸載全部事件的思路，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧！
2017-04-04
jquery實現(xiàn)淘寶詳情頁選擇套餐
這篇文章主要為大家詳細介紹了jquery實現(xiàn)淘寶詳情頁選擇套餐，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
一個超簡單的jQuery回調(diào)函數(shù)例子(分享)
下面小編就為大家?guī)硪黄粋€超簡單的jQuery回調(diào)函數(shù)例子(分享) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08