首頁 > web前端 > js教程 > 主體

基於jquery自訂的漂亮單選按鈕RadioButton

PHP中文网
發布: 2017-06-06 16:54:27
原創
1762 人瀏覽過

繼續分享web前端自訂控件,今天要分享的控件是單選按鈕,希望對你有收穫,有好的建議也希望能留言給我。程式碼如下: 

Html程式碼如下: 

複製程式碼 程式碼如下:

<p style="margin:50px;float:left;"> 
<b class="radio" _txt="单选我"></b> 
<b class="radio" _txt="单选你"></b> 
<b class="radio" _txt="单选他"></b> 
</p>
登入後複製

Css程式碼如下: 

Css代碼 代碼如下:

.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部分代碼: 

1、自訂單選按鈕類別 

複製代碼🎜> >

//单选项 
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 () { } 
}
登入後複製
2、實例化: 



複製代碼 代碼如下:

示例圖片: 
//初始化单选框 var radio = new RadioButton(); radio.obj = $(&#39;.radio&#39;); radio.init();
登入後複製
 


基於jquery自訂的漂亮單選按鈕RadioButton樣式集圖:

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板