Beautiful CheckBox of yourself based on jquery extensions

  • 2020-03-29 23:51:31
  • OfStack

As you all know, the default HTML checkbox control style can be defined in a fairly limited way that doesn't satisfy the aesthetic needs of most users. Today I'd like to share with you the CheckBox control I wrote some time ago. The friend that likes can take to use, have what good suggestion hope you give me message. Without further ado, get to the point.

The Html code is as follows:
 
<b class="combox"></b> 

The Css part is as follows:
 
.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 part of the code is as follows:

1. Custom checkbox class
 
//Check box
var CheckBox = function () { 
this.obj; 
var _this = this, _obj; 
//Initialize the
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(" Control properties set incorrectly: some controls are not checkboxes! "); 
return; 
} 
//Object click event
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(); 
} 
} 

// I have text Check box
if (_obj.attr('_txt') != undefined) { 
_obj.each(function (i) { 
var cb = _obj.eq(i); 
cb.wrapAll('<font class="cb_txt"></font>'); 
//Text click event
cb.parent().append(cb.attr('_txt')).click(function () { click_fun(cb); }); 
}); 
} else//Object click event
_obj.unbind('click').click(function () { click_fun($(this)); }); 
} 
//Click the callback event
this.click_callback = function () { } 
//Deselect event
this.click_cancel = function () { } 
} 

2. Call as follows:
 
var checkbox = new CheckBox(); 
checkbox.obj = $('.content ul li .combox'); 
//Click the callback event to adjust according to your own needs, there is no corresponding operation event by default, you can not assign a value
checkbox.click_callback = function () { fun_setPay(); } 
//Deselect event
checkbox.click_cancel = function () { fun_setPay(); } 
checkbox.init(); 

Pictures used:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311191549371.gif? 20131019154957 ">  
Sample display diagram:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311191549372.jpg? 2013101915512 ">

Related articles: