继续分享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()
- html代码
- init()
- click_callback()
html代码
<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>
init()
初始化对象
示例:
$(document).ready(function () {
$(‘.com_table .radio‘).each(function (i, item) {
var radio = new RadioButton();
radio.obj = $(this);
radio.init();
})
})
展示效果:
click_callback()
选择事件
示例:
$(‘.com_table .radio‘).each(function (i, item) {
var radio = new RadioButton();
radio.obj = $(this);
//选择事件
radio.click_callback = function () {
alert("已选择该项");
}
radio.init();
})
展示效果:
下载地址：
http://www.tiaoceng.com/assemblydetail_31.html