基于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与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
微信小程序实现音乐播放页面布局
Dec 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Python操作SQLite简明教程
2014/07/10 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
详解python播放音频的三种方法
2019/09/23 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
华为的Java面试题
2014/03/07 面试题
Android笔试题总结
2014/11/29 面试题
人力资源管理专业应届生求职信
2014/04/24 职场文书
签约仪式策划方案
2014/06/02 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
golang操作rocketmq的示例代码
2022/04/06 Golang
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技
Moment的feature导致线上bug解决分析
2022/09/23 Javascript