基于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 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
基于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学习笔记(毕业设计)
2012/02/21 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Sanic框架流式传输操作示例
2018/07/18 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python多线程使用方法实例详解
2019/12/30 Python
美国折扣网站:jClub
2017/08/07 全球购物
经济类毕业生求职信
2014/06/26 职场文书
大学活动总结模板
2014/07/10 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
创业计划书之酒店
2019/08/30 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
教你一步步实现一个简易promise
2021/11/02 Javascript
在 Python 中利用 Pool 进行多线程
2022/04/24 Python