基于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_12_执行模型浅析
Oct 18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue实现lodop打印功能的示例
Nov 11 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python标准库之循环器(itertools)介绍
2014/11/25 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
珍珠奶茶店创业计划书
2014/01/11 职场文书
工程承诺书怎么写
2014/05/24 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书