基于jquery自定義的漂亮單選按鈕RadioButton
更新時間：2013年11月19日 16:06:16 作者：
今天所要分享的控件是單選按鈕，一個基于jquery擴(kuò)展漂亮的單選按鈕——RadioButton，喜歡的朋友可以收藏下
繼續(xù)分享web前端自定義控件，今天所要分享的控件是單選按鈕，希望對你有收獲，有好的建議也希望能留言給我。代碼如下：
Html代碼如下：
<div style="margin:50px;float:left;">
<b class="radio" _txt="單選我"></b>
<b class="radio" _txt="單選你"></b>
<b class="radio" _txt="單選他"></b>
</div>
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('class').indexOf('radio') == -1) {
showMessage("控件屬性設(shè)置有誤：部分控件并不是單選項！");
return;
}
//單選事件
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();
};
//設(shè)置有文字單選項
if (_obj.attr('_txt') != undefined) {
_obj.each(function (i) {
var radio = _obj.eq(i);
radio.wrapAll('<font class="radio_txt"></font>');
//文本單擊事件
radio.parent().append(radio.attr('_txt')).click(function () { click_fun(radio); });
});
} else//對象點(diǎn)擊事件
_obj.unbind('click').click(function () { click_fun($(this)); });
}
//點(diǎn)擊回調(diào)事件
this.click_callback = function () { }
}
2、實例化：
//初始化單選框
var radio = new RadioButton();
radio.obj = $('.radio');
radio.init();
示例圖片：
樣式集合圖：
Html代碼如下：
復(fù)制代碼 代碼如下:
<div style="margin:50px;float:left;">
<b class="radio" _txt="單選我"></b>
<b class="radio" _txt="單選你"></b>
<b class="radio" _txt="單選他"></b>
</div>
Css代碼如下：
復(fù)制代碼 代碼如下:
.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、自定義單選按鈕類
復(fù)制代碼 代碼如下:
//單選項
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('class').indexOf('radio') == -1) {
showMessage("控件屬性設(shè)置有誤：部分控件并不是單選項！");
return;
}
//單選事件
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();
};
//設(shè)置有文字單選項
if (_obj.attr('_txt') != undefined) {
_obj.each(function (i) {
var radio = _obj.eq(i);
radio.wrapAll('<font class="radio_txt"></font>');
//文本單擊事件
radio.parent().append(radio.attr('_txt')).click(function () { click_fun(radio); });
});
} else//對象點(diǎn)擊事件
_obj.unbind('click').click(function () { click_fun($(this)); });
}
//點(diǎn)擊回調(diào)事件
this.click_callback = function () { }
}
2、實例化：
復(fù)制代碼 代碼如下:
//初始化單選框
var radio = new RadioButton();
radio.obj = $('.radio');
radio.init();
示例圖片：
樣式集合圖：
您可能感興趣的文章:
相關(guān)文章
第一次用JSON作為jquery異步請求的傳輸對象，結(jié)果在jquery請求后返回的結(jié)果是字符串還是json對象上折騰了半天。2011-04-04
本文給大家分享的是利用jQuery插件，通過讀取JSON數(shù)據(jù)，實現(xiàn)無刷新動態(tài)下拉省市二（三）級聯(lián)動效果，十分的簡單實用，效果也非常棒，有需要的小伙伴可以參考下。2015-06-06
很多網(wǎng)站的首頁都有廣告輪播，今天閑來看了一網(wǎng)站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現(xiàn)的，然后自己測試了一下，很好。2010-11-11
這篇文章主要介紹了jQuery中元素選擇器（element）用法,簡單通俗的說明了jQuery元素選擇器的功能、用法并結(jié)合實例形式分析了jQuery元素選擇器的相關(guān)使用技巧與注意事項,需要的朋友可以參考下2018-05-05
本文主要給大家講解的是jQuery使用元素屬性attr設(shè)置多個鍵值或函數(shù)的方法和示例，非常的實用，推薦給小伙伴們參考下。2015-02-02
基于CSS3和jQuery實現(xiàn)跟隨鼠標(biāo)方位的Hover特效
這篇文章主要介紹了基于CSS3和jQuery實現(xiàn)跟隨鼠標(biāo)方位的Hover特效的相關(guān)資料,需要的朋友可以參考下2016-07-07
本篇文章是對jQuery中常用的元素查找方法進(jìn)行了詳細(xì)的總結(jié)和介紹，需要的朋友參考下2013-07-07
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)彈出層登錄和全屏層注冊特效，推薦給大家，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了jQuery的one()方法用法,實例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個一次性的事件處理方法使用技巧,需要的朋友可以參考下2015-01-01
jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，后來實驗發(fā)現(xiàn)有一個jQuery的一個方法可以解決2014-10-10