自定义的html radio button的样式
设计要求效果如下:
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
平时看到的radio button效果如下:
可以看出设计上图的radio button选中和没有选中的状态都有自定义的图片样式。但是我们使用radio button基本上都是需要在互斥的一组。我们需要保持radio button本身的功能,同时又需要自定义的它的样式。之前项目中大家都是能使用传统的radio button过了就过了,也没有怎么研究。这次项目,我尝试使用了一些方法,可以达到自定义的radio button的样式。
4个选项的结构都相同,只是内容有所改变,结构如下所示:
<li>
<span class="pollspanRadio"><input name="pollresult" id="raido1" type="radio" class="radioinput" answerid="1"></span>
<span class="radiotext"><label class="pollspanContent" for="raido1" data-index="1">HTML(5)</label></span>
</li>
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
分左右两个部分内容,左边显示radio button,右边显示text相关内容。需要对第一个span添加样式。但是目前情况会发生重叠,而且选中状态还是默认的选中状态。
通过设置样式,我们可以将默认的radio button隐藏不显示出来,通过通过JavaScript来控制用户选中其中的一个radio button,然后得到指定的值。代码如下:
<script type="text/javascript">
$("#optionlist li").live('click', function () {
//移除之前选中的radio的样式
$("#optionlist li .pollspanRadio").removeClass("selectedoption");
$(this).find(".pollspanRadio").addClass(" selectedoption");
$(this).find("input[type='radio']").get(0).click();
});
</script>
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
因为现在自定义的radio button的样式,所以我们现在要获取到我们当前选中的option的内容值。通过jQuery解决问题非常方便。
我们最后想获取的值应该是作为属性放在label标签里面,这里是data-index。我们通过选中radio button,需要获得data-index的值。但是input和label是分开的,下面我们通过jQuery获得我们选中的值。
var selectedOptionText = $("#optionlist li").find(".pollspanRadio input:checked").parent().parent().find(".pollspanContent").attr("data-index");
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
这里主要使用了jQuery的parent()函数,在这里程序的性能不是非常好。
改进的地方:如果我们默认第二个选中的话,在checked=”checked”,但是我们是模拟显示,所以我们在程序初始化中,对此进行判断。
$(document).ready(function(){
$("#optionlist li").find(".pollspanRadio input:checked").parent().addClass("selectedoption");
});
完成之后的效果图如下:
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
提示:Radio button需要放在form表单中,多个radio button才能互斥。
Demo文件下载地址:http://files.cnblogs.com/liminjun88/customRadioButton.zip
- Sublime text 3 中Package Control 的安装与使用方法
- 用functools.lru_cache实现Python的Memoization
- 腾讯互联网与社会研究院秘书长司晓:将联合开展研究合作
- 幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)
- Gravatar开发者手册
- Gravatar开发者手册
- 使用Google CDN服务提供的jQuery库
- 比特币的分叉币都认为能够取代比特币,事实真的是这样吗?
- Google官方网页载入速度检测工具PageSpeed Insights 使用教程
- ASP.NET 路由
- Kafka定时清除过期数据
- 腾讯高级副总裁郭凯天:打造腾讯智库分析互联网产业前沿问题
- Google Chrome 浏览器 开发者工具 使用教程
- 反向代理(Reverse Proxy)及 IIS 7 应用请求路由模块
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android 获取进程名函数,如何优化到极致?
- R语言做K均值聚类的一个简单小例子
- 如何自动化Salesforce应用程序
- 2万字带你学习Qos原理,还有6个实验案例,建议一定要收藏!
- 最全总结 | 聊聊 Python 数据处理全家桶(MongoDB 篇)
- R函数
- unstack函数应用——生成单细胞marker基因表格
- 手把手教你使用Python打造一个智能搜索淘宝商品,生成操作日志的系统
- leetcode树之将有序数组转换为二叉搜索树
- Mysql必知必会!
- 【一天一大 lee】路径总和 II (难度:中等) - Day20200926
- 【一天一大 lee】从中序与后序遍历序列构造二叉树 (难度:中等)-Day20200925
- 【一天一大 lee】填充每个节点的下一个右侧节点指针 II (难度:中等) - Day20200928
- 【一天一大 lee】 二叉搜索树中的众数 (难度:简单)-Day20200924
- 【一天一大 lee】 合并二叉树 (难度:简单)-Day20200923