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 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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页面间传递参数实例代码
2008/06/05 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
JSONP基础知识详解
2017/03/19 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python实现的爬虫功能代码
2017/06/24 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
诚信承诺书
2015/01/19 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书