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:
The Css code is as follows:
Js part of the code:
1. Custom radio button class
2. Instantiation:
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 ">
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 ">