基于jquery扩展漂亮的CheckBox
来源:互联网 发布:守夜人社工库源码 编辑:程序博客网 时间:2024/05/22 10:47
大家都知道默认的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();
使用的图片:
示例展示图:
下载地址:
js复选框控件
http://www.tiaoceng.com/assemblydetail_3.html
脑球网及刚上线的网站:移动电源需要做外链留下联系方式。
- 基于jquery扩展漂亮的CheckBox
- 基于jquery扩展漂亮的下拉框——ComboBox
- 基于jquery扩展漂亮的分页控件(ajax)
- 基于jquery扩展之漂亮的智能感知控件
- 漂亮的 Checkbox and Radio (jQuery)
- 基于jquery扩展漂亮的单选按钮——RadioButton
- jquery扩展的easyui-checkbox控件
- 基于jQuery的Checkbox精美样式插件
- jquery扩展的radio和checkbox前端调用方法
- 基于jquery扩展的弹层控件
- 基于bootstrap的JQuery中所有checkBox默认选中
- 漂亮的checkbox样式 (多选框)
- 漂亮的JQuery图表插件
- 漂亮的jquery提示效果
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- jquery的checkbox操作
- jquery的checkbox
- 4_链表栈
- Python的一些扩展库
- n个数字组成的三位数
- 内容页标记(1) -- 手册上有的
- KMP算法
- 基于jquery扩展漂亮的CheckBox
- Leetcode 之 Reverse Linked List II
- ORA-12154 和 TNS-03505 监听错误的解决方法
- 备份数据库
- linux下的init命令
- 约瑟夫问题(Josephus Problem)3:谁最后一个出列
- 《荀子·劝学篇》原文 翻译
- 重建机房收费系统数据库(第二版)
- 装修日记链接