Home > Web Front-end > JS Tutorial > body text

Beautiful radio button RadioButton customized based on jquery

PHP中文网
Release: 2017-06-06 16:54:27
Original
1726 people have browsed it

Continue to share web front-end custom controls. The control I want to share today is a radio button. I hope it will be useful to you. If you have any good suggestions, I hope you can leave me a message. The code is as follows:

Html code is as follows:

Copy code The code is as follows:

<p style="margin:50px;float:left;"> 
<b class="radio" _txt="单选我"></b> 
<b class="radio" _txt="单选你"></b> 
<b class="radio" _txt="单选他"></b> 
</p>
Copy after login

Css code is as follows:

Copy Code The 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;}
Copy after login

Js part code:

1. Custom radio button class

Copy code The code is as follows:

//单选项 
var RadioButton = function () { 
this.obj; 
var _this = this, _obj; 
//初始化 
this.init = function () { 
_obj = _this.obj; 
var tem = _obj.length > 1 ? _obj.eq(0) : _obj; 
if (tem.attr(&#39;class&#39;).indexOf(&#39;radio&#39;) == -1) { 
showMessage("控件属性设置有误:部分控件并不是单选项!"); 
return; 
} 
//单选事件 
var click_fun = function (obj) { 
if (obj.parent().attr(&#39;class&#39;) == &#39;radio_txt&#39;) { 
obj.parent().parent().find(&#39;.radio_txt .radio&#39;).removeClass(&#39;checked&#39;); 
} else 
obj.siblings(&#39;.radio&#39;).removeClass(&#39;checked&#39;); 
obj.addClass(&#39;checked&#39;); 
_this.click_callback(); 
}; 
//设置有文字单选项 
if (_obj.attr(&#39;_txt&#39;) != undefined) { 
_obj.each(function (i) { 
var radio = _obj.eq(i); 
radio.wrapAll(&#39;<font class="radio_txt"></font>&#39;); 
//文本单击事件 
radio.parent().append(radio.attr(&#39;_txt&#39;)).click(function () { click_fun(radio); }); 
}); 
} else//对象点击事件 
_obj.unbind(&#39;click&#39;).click(function () { click_fun($(this)); }); 
} 
//点击回调事件 
this.click_callback = function () { } 
}
Copy after login


2. Instantiation:

Copy code The code is as follows:

//初始化单选框 var radio = new RadioButton(); radio.obj = $(&#39;.radio&#39;); radio.init();
Copy after login

Sample image:
Beautiful radio button RadioButton customized based on jquery

Style collection picture:

Beautiful radio button RadioButton customized based on jquery

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!