jquery 按钮状态效果 正常、移上、按下


Posted in Javascript onAugust 12, 2013

在网页设计过程中,经常遇见按钮的各状态效果。写了一个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>
Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
checkbox设置复选框的只读效果不让用户勾选
Aug 12 #Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 #Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 #Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 #Javascript
js获取php变量的实现代码
Aug 10 #Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 #Javascript
You might like
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Python读取word文本操作详解
2018/01/22 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python常用断言函数实例汇总
2020/11/30 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
ORACLE十问
2015/04/20 面试题
四年级评语大全
2014/04/21 职场文书
星级党支部申报材料
2014/05/31 职场文书
创优争先心得体会
2014/09/11 职场文书
未婚证明书模板
2014/10/08 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
邀请函格式范文
2015/02/02 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Python进行区间取值案例讲解
2021/08/02 Python