基于jquery扩展漂亮的CheckBox(自己编写)


Posted in Javascript onNovember 19, 2013

大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言。废话不多说,切入正题。

Html部分代码如下:

<b class="combox"></b>

Css部分代码如下:
.combox{float:left;background:url(/img/Icon_BG.png);} 
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;} 
.combox.checked{background-position:-37px -40px;}

Js部分代码如下:

1、自定复选框类

//复选框 
var CheckBox = function () { 
this.obj; 
var _this = this, _obj; 
//初始化 
this.init = function () { 
_obj = _this.obj; 
var tem = _obj.length > 1 ? _obj.eq(0) : _obj; 
if (tem.length == 1 && tem.attr('class').indexOf('combox') == -1) { 
showMessage("控件属性设置有误:部分控件并不是复选框!"); 
return; 
} 
//对象单击事件 
var click_fun = function (obj) { 
if (obj.attr('class').indexOf('checked') > -1) { 
obj.removeClass('checked'); 
_this.click_cancel(); 
} else { 
obj.addClass('checked'); 
_this.click_callback(); 
} 
} //设置有文字复选框 
if (_obj.attr('_txt') != undefined) { 
_obj.each(function (i) { 
var cb = _obj.eq(i); 
cb.wrapAll('<font class="cb_txt"></font>'); 
//文本单击事件 
cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); }); 
}); 
} else//对象点击事件 
_obj.unbind('click').click(function () { click_fun($(this)); }); 
} 
//点击回调事件 
this.click_callback = function () { } 
//取消选择事件 
this.click_cancel = function () { } 
}

2、调用如下:
var checkbox = new CheckBox(); 
checkbox.obj = $('.content ul li .combox'); 
//点击回调事件 根据自己的需求去调整,默认没有相应操作事件,可以不用赋值 
checkbox.click_callback = function () { fun_setPay(); } 
//取消选择事件 
checkbox.click_cancel = function () { fun_setPay(); } 
checkbox.init();

使用的图片:
基于jquery扩展漂亮的CheckBox(自己编写) 
示例展示图:
基于jquery扩展漂亮的CheckBox(自己编写)
Javascript 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 #Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 #Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 #Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 #Javascript
jQuery控制iFrame(实例代码)
Nov 19 #Javascript
jquery 检测元素是否存在的实例代码
Nov 19 #Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 #Javascript
You might like
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python出现segfault错误解决方法
2016/04/16 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
简单实现python聊天程序
2018/04/01 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python next()和iter()函数原理解析
2020/02/07 Python
python deque模块简单使用代码实例
2020/03/12 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
如何解决python多种版本冲突问题
2020/10/13 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
经销商培训邀请函
2014/01/21 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
大学社团计划书
2014/05/01 职场文书
工作检讨书500字
2014/10/19 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
高三毕业感言
2015/07/30 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android