管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

基于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();

　　使用的图片：

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

　　示例展示图：

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

　　

教程首页 更多教程