基于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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
js分页工具实例
Jan 28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
js倒计时简单实现方法
Dec 17 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
jquery实现进度条状态展示
Mar 26 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缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php url路由入门实例
2014/04/23 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PDO::errorCode讲解
2019/01/28 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
浅析vue深复制
2018/01/29 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
jQuery实现简单弹幕效果
2019/11/28 jQuery
决策树的python实现方法
2014/11/18 Python
Python运用于数据分析的简单教程
2015/03/27 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
深入理解Python 多线程
2020/06/16 Python
怎么快速自学python
2020/06/22 Python
pycharm实现猜数游戏
2020/12/07 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
知名企业招聘广告词大全
2014/03/18 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年法院工作总结范文
2015/04/28 职场文书