基於jquery擴展漂亮的單選按鈕——RadioButton

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

 

Html代碼如下:

 

[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。自定義單選按鈕類

 

[javascript] 

//單選項  

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("控件屬性設置有誤:部分控件並不是單選項!");  

            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();  

        };  

  

        //設置有文字單選項  

        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//對象點擊事件  

            _obj.unbind('click').click(function () { click_fun($(this)); });  

    }  

    //點擊回調事件  

    this.click_callback = function () { }  

}  

 

2.實例化:

 

[javascript] 

//初始化單選框  

    var radio = new RadioButton();  

    radio.obj = $('.radio');  

    radio.init();  

 

發佈留言