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 相关文章推荐
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
js同源策略详解
May 21 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 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项目的方法
2006/10/09 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python Json序列化与反序列化的示例
2018/01/31 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python实现图片添加文字
2019/11/26 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
公务员总结性个人自我评价
2013/12/05 职场文书
大学生思想汇报范文
2013/12/31 职场文书
培训自我鉴定
2014/01/31 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Python中字符串对象语法分享
2022/02/24 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL