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 相关文章推荐
node.js中的path.basename方法使用说明
Dec 09 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
AngularJS执行流程详解
Feb 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
用vue写一个日历
Nov 02 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
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python中subprocess的简单使用示例
2015/07/28 Python
Python实现身份证号码解析
2015/09/01 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
会计系中文个人求职信
2013/12/24 职场文书
动员大会主持词
2014/03/20 职场文书
2015年司法所工作总结
2015/04/27 职场文书
党支部半年考察意见
2015/06/01 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
使用Redis实现实时排行榜功能
2021/07/02 Redis
python缺失值填充方法示例代码
2022/12/24 Python