基于jquery扩展漂亮的单选按钮——RadioButton
来源:互联网 发布:速卖通产品数据分析 编辑:程序博客网 时间:2024/05/01 12:58
继续分享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
- 基于jquery扩展漂亮的单选按钮——RadioButton
- 基于jquery扩展漂亮的下拉框——ComboBox
- android开发小技巧(4)漂亮的单选按钮(非radiobutton)
- 基于jquery扩展漂亮的CheckBox
- RadioButton单选按钮
- RadioButton单选按钮
- RadioButton单选按钮
- RadioButton单选按钮
- 单选按钮RadioButton
- 单选按钮RadioButton
- RadioButton单选按钮
- 单选按钮RadioButton
- Android 单选按钮RadioButton的使用
- 单选按钮 RadioButton 的使用
- Android 单选按钮RadioButton的使用
- radioButton单选按钮的实现
- 安卓编程——单选框RadioGroup,单选按钮RadioButton的使用
- 自定义RadioButton ,单选按钮
- bmp 的文件格式头
- 模拟标题栏,移动或双击可以最大或最小化窗体
- 3DFDTD 软件C++编程规范
- KVM虚拟机IO处理过程(一) ----Guest VM I/O 处理过程
- sharepoint2007的悲剧
- 基于jquery扩展漂亮的单选按钮——RadioButton
- adb shell am 的用法
- strtok学习实例
- Invalid action class configuration that references an unknown class named错误解决
- mssqlserver2008 收缩日志文件
- Qt主窗口没有最小化,最大化按钮且最大化显示
- cocos2d-x中添加Enter键和方向键按键响应
- 摄像头测脉搏的原理
- 矩阵的求逆