Beautiful RadioButton RadioButton based on jquery custom

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

Continue to share web front end custom control, today to share the control is radio button, I hope you have a harvest, there is good advice also hope to leave a message to me. The code is as follows:

The Html code is as follows:
 
<div style="margin:50px;float:left;"> 
<b class="radio" _txt=" The radio I "></b> 
<b class="radio" _txt=" Radio you "></b> 
<b class="radio" _txt=" Radio he "></b> 
</div> 

The Css code is as follows:
 
.radio{float:left;background:url(/img/Icon_BG.png);} 
.radio{width:14px;height:14px;background-position:0px -58px;cursor:pointer;font-size:9px;} 
.radio.checked{background-position: -15px -58px;} 
.radio_txt{float:left;margin:0px 0 0 10px;cursor:pointer;line-height:14px;font-size:12px;} 
.radio_txt .radio{margin-right:5px;} 

Js part of the code:

1. Custom radio button class
 
//The radio
var RadioButton = 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.attr('class').indexOf('radio') == -1) { 
showMessage(" Control properties set incorrectly: some controls are not radio options! "); 
return; 
} 
//Radio events
var click_fun = function (obj) { 
if (obj.parent().attr('class') == 'radio_txt') { 
obj.parent().parent().find('.radio_txt .radio').removeClass('checked'); 
} else 
obj.siblings('.radio').removeClass('checked'); 
obj.addClass('checked'); 
_this.click_callback(); 
}; 

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

2. Instantiation:
 
//Initializes the menu
var radio = new RadioButton(); 
radio.obj = $('.radio'); 
radio.init(); 

Sample image:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311191556385.png? 201310191648 ">  
Style collection diagram:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311191604323.gif? 2013101916453 ">

Related articles: