基于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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 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分页示例代码
2007/03/19 PHP
php 三维饼图的实现代码
2008/09/28 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
利用python发送和接收邮件
2016/09/27 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python mysql断开重连的实现方法
2019/07/26 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
应届生骨科医生求职信
2013/10/31 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
融资租赁计划书
2014/04/29 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Python3的进程和线程你了解吗
2022/03/16 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript