快捷導(dǎo)航

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

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

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

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

復(fù)制代碼代碼如下:

 
(function ($) { 
// Button按鈕的三種樣式替換，如果isState參數(shù)為T(mén)rue則記錄按下?tīng)顟B(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); 

示例頁(yè)面Default.aspx：

復(fù)制代碼代碼如下:

 
<%@ 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> 

您可能感興趣的文章:

相關(guān)文章

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