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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
Seajs源码详解分析
Apr 02 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
js动态添加带圆圈序号列表的实例代码
Feb 18 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实现下载限制速度示例分享
2014/02/13 PHP
PHP的反射机制实例详解
2017/03/29 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python创建和删除目录的方法
2015/04/29 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python 加密的实例详解
2017/10/09 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
自荐信的基本格式
2014/02/22 职场文书
绿色学校实施方案
2014/03/31 职场文书
销售岗位职责范本
2014/06/12 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
《西门豹》教学反思
2016/02/23 职场文书
2019消防宣传标语!
2019/07/10 职场文书
golang中的struct操作
2021/11/11 Golang
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL