基于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 相关文章推荐
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
js解决movebox移动问题
Mar 29 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
详解vue添加删除元素的方法
Jun 30 Javascript
express框架下使用session的方法
Jul 31 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
微信小程序实现轮播图指示器
Jun 25 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
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php eval函数用法总结
2012/10/31 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
django2笔记之路由path语法的实现
2019/07/17 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python时间time模块处理大全
2020/10/25 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
无偿献血倡议书
2014/04/14 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android