基于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();
示例图片：
以下为示例教程
RadioButton()
Contents
- RadioButton()
<head>
<title><／title>
<link href="/_css/common.css" rel="stylesheet" type="text/css" ／>
<script src="/_js/jquery-1.8.2.min.js" type="text/javascript"><／script>
<script src="/_js/Valid.js" type="text/javascript"><／script>
<script src="download.js" type="text/javascript"><／script>
<／head>
<body>
<div class="com_table">
<b class="radio" _txt="1"><／b>
<b class="radio" _txt="2"><／b>
<b class="radio" _txt="3"><／b>
<／div>
<／body>
初始化对象
示例:
$('.com_table .radio').each(function (i, item) {
var radio = new RadioButton();
radio.obj = $(this);
radio.init();
})
})
展示效果:
选择事件
示例:
var radio = new RadioButton();
radio.obj = $(this);
//选择事件
radio.click_callback = function () {
alert("已选择该项");
}
radio.init();
})
展示效果:
下载地址：
