基于jquery扩展漂亮的CheckBox
大家都知道默认的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();
使用的图片：
示例展示图：
以下为示例教程：
CheckBox()
Contents
- CheckBox()
<head>
<title><／title>
<link href="/_css/common.css" rel="stylesheet" type="text/css" ／>
<script src="/_js/jquery-1.8.2.min.js" type="text/javascript"><／script>
<script src="/_js/Valid.js" type="text/javascript"><／script>
<script src="download.js" type="text/javascript"><／script>
<／head>
<body>
<div class="com_table">
<b class="combox" _txt="1"><／b>
<b class="combox" _txt="2"><／b>
<b class="combox" _txt="3"><／b>
<／div>
<／body>
初始化对象
示例:
$('.com_table .combox').each(function (i, item) {
var checkbox = new CheckBox();
checkbox.obj = $(this);
checkbox.init();
})
})
展示效果:
点击回调事件
示例:
var checkbox = new CheckBox();
checkbox.obj = $(this);
//已选中该项
checkbox.click_callback = function () {
alert("已选中该项");
}
checkbox.init();
}）
展示效果:
取消选择事件
示例:
var checkbox = new CheckBox();
checkbox.obj = combox;
//取消事件
checkbox.click_cancel = function () {
alert("已取消选择");
}
checkbox.init();
}）
展示效果:
下载地址：
http://www.tiaoceng.com/assemblydetail_3.html
