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


Posted in Javascript onNovember 19, 2013

继续分享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();

示例图片:
基于jquery自定义的漂亮单选按钮RadioButton 
样式集合图:
基于jquery自定义的漂亮单选按钮RadioButton
Javascript 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
Javascript实现单选框效果
Dec 09 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 #Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 #Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 #Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 #Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 #Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python中的常量和变量代码详解
2018/07/25 Python
django将数组传递给前台模板的方法
2019/08/06 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
护士个人简历自荐信
2013/10/18 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
广告学专业推荐信范文
2013/11/23 职场文书
服装店营销方案
2014/03/10 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2014年食堂工作总结
2014/11/20 职场文书
员工福利申请报告
2015/05/15 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
redis 解决库存并发问题实现数量控制
2022/04/08 Redis