基于jquery自定义的漂亮单选按钮RadioButton
更新时间:2013年11月19日 16:06:16 作者:
今天所要分享的控件是单选按钮,一个基于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();
示例图片:
样式集合图:
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();
示例图片:
样式集合图:
相关文章
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
这篇文章主要介绍了使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办的相关资料,需要的朋友可以参考下2016-01-01jQuery UI工具提示框部件Tooltip Widget
这篇文章介绍了jQuery UI工具提示框部件Tooltip Widget,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-06-06jQuery EasyUI API 中文文档 - ProgressBar 进度条
jQuery EasyUI API 中文文档 - ProgressBar 进度条,使用jQuery EasyUI的朋友可以参考下。2011-09-09
最新评论