Continue to share the Web front-end custom control, today to share the control is a radio button, I hope you have a harvest, have good suggestions also want to leave a message to me. The code is as follows:
The HTML code is as follows:
Copy Code code as follows:
<div style= "Margin:50px;float:left;" >
<b class= "Radio" _txt= "Single Choice Me" ></b>
<b class= "Radio" _txt= "Select You" ></b>
<b class= "Radio" _txt= "The single elect him" ></b>
</div>
The CSS code is as follows:
Copy Code code 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
Copy Code code as follows:
Single option
var RadioButton = function () {
This.obj;
var _this = this, _obj;
Class
This.init = function () {
_obj = _this.obj;
var tem = _obj.length > 1? _obj.eq (0): _obj;
if (tem.attr (' class '). IndexOf (' radio ') = = 1) {
ShowMessage ("Control property settings are incorrect: Some controls are not single 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 ();
};
Set a text list option
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 Callback Event
This.click_callback = function () {}
}
2. Instantiation:
Copy Code code as follows:
Initialize a radio box
var radio = new RadioButton ();
Radio.obj = $ ('. Radio ');
Radio.init ();
Sample Picture:
Style Collection diagram:
