基于jquery自定义的漂亮单选按钮RadioButton

前端技术 2023/09/06 JavaScript
继续分享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();

示例图片：
 
样式集合图：

本文地址：https://www.stayed.cn/item/15771

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案