×

基于jquery扩展CheckBox

作者:流泪的石头2017.08.03来源:Web前端之家浏览:8488评论:0
关键词:JQueryJS
大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言。废话不多说,切入正题。

Html部分代码如下:

.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;} 
<i class="combox"></i>
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();

示例展示图:

您的支持是我们创作的动力!
温馨提示:本文作者系流泪的石头 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488211200585.html

网友评论文明上网理性发言 已有0人参与

发表评论: