首页 / JQUERY / 基于jquery扩展漂亮的CheckBox(自己编写)_jquery

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于jquery扩展漂亮的CheckBox(自己编写)_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1753字，纯文字阅读大概需要3分钟。

内容图文

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

Html部分代码如下：
代码如下:



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('');
//文本单击事件
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 - 文章图片
示例展示图：
基于jquery扩展漂亮的CheckBox(自己编写)_jquery - 文章图片

内容总结

以上是互联网集市为您收集整理的基于jquery扩展漂亮的CheckBox(自己编写)_jquery全部内容，希望文章能够帮你解决基于jquery扩展漂亮的CheckBox(自己编写)_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/318498.html

来源：【匿名】