基于jquery扩展漂亮的单选按钮——RadioButton

继续分享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("控件属性设置有误：部分控件并不是单选项！");
            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.实例化：

//初始化单选框
    var radio = new RadioButton();
    radio.obj = $('.radio');
    radio.init();

示例图片：

样式集合图：

脑球网及刚上线的网站：移动电源需要做外链留下联系方式。

下载地址：

js单选框控件

http://www.tiaoceng.com/assemblydetail_31.html