基于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 相关文章推荐
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python paramiko模块的使用示例
2018/04/11 Python
python实现日志按天分割
2019/07/22 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
银行先进个人事迹材料
2014/05/11 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
旗帜观后感
2015/06/08 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题