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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
js实现磁性吸附的示例
Oct 26 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
python去除所有html标签的方法
2015/05/05 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python星号*与**用法分析
2018/02/02 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
50道外企软件测试面试题
2014/08/18 面试题
项目建议书怎么写
2014/05/15 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
品牌转让协议书
2014/08/20 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python