基于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和C#的异同
May 31 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
简单了解常用的JavaScript 库
Jul 16 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
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现单词拼写检查
2015/04/25 Python
python实现自动重启本程序的方法
2015/07/09 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
中学家长会邀请函
2014/01/17 职场文书
秋季运动会稿件
2014/01/30 职场文书
亲子拓展活动方案
2014/02/20 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js