表单美化-原生javascript和jQuery单选按钮（兼容IE6）
最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果。
首先我们先来用javascript的方式，不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分。javascript是前端的基础建议大家还是要学习下原生javascript。
我们的想法是：利用单选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。
1：原生javascript美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
我们采取的是把原来的表单元素的透明度改为0，或者直接display：none掉然后添加标签配合脚本模拟点击效果。
下面直接给出demo 童鞋们直接复制就好
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;} </style>
<script type="text/javascript">
function show(index){ /*定义一个函数*/
var tyle=document.getElementById("tyle"); /*获取ID为tyle的元素*/
var label=tyle.getElementsByTagName("label"); /*通过ID为tyle的元素获取下面的所有label元素，注意了返回的是包含所有label元素的数组*/
// 我们要访问每个label元素那么就要遍历
for(var i=0;i<label.length;i++){
if(i==index){ /*判断当前的i和传进来的参数是否相等 */
label[i].className="checked";/*相等的话 就给类*/
}else{label[i].className=null;} /*不是的话 类为空*/
}
}
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" onclick="show(0)"> <!-- 当这个label元素被点击的时候调用show()这个函数并且传参0 以便函数确认点击谁 -->
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman" onclick="show(1)">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" onclick="show(2)">
<span class="coin"></span>
<input type="radio" id="man-woman" value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>
用到的图片
效果
现在我们来完善下代码，增加不能点击功能
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;} </style>
<script type="text/javascript">
function show(index){ /*定义一个函数*/
var tyle=document.getElementById("tyle"); /*获取ID为tyle的元素*/
var label=tyle.getElementsByTagName("label"); /*通过ID为tyle的元素获取下面的所有label元素，注意了返回的是包含所有label元素的数组*/
// 我们要访问每个label元素那么就要遍历
for(var i=0;i<label.length;i++){
if(i==index){ /*判断当前的i和传进来的参数是否相等 */
label[i].className="checked";/*相等的话 就给类*/
}else{
if(label[i].className=="disabled"){ // 再判断一下当前的label是否有disabled这个类
label[i].className="disabled" //如果有的话 就保持这个类
}else{label[i].className=null;} //否则就清空类
} /*不是的话 类为空*/
}
}
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" onclick="show(0)"> <!-- 当这个label元素被点击的时候调用show()这个函数并且传参0 以便函数确认点击谁 -->
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman" onclick="show(1)">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="disabled"> //增加一个不能点击的元素
<span class="coin"></span>
<input type="radio" id="man-woman" disabled value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>
效果
2：jQuery美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
用jQuery做的代码简洁了许多，有木有。。。。效果和上面一致
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tyle label").click(function() { /*为ID为tyle里面的所有label绑定点击事件*/
$(this).not('.disabled').addClass('checked').siblings().not('.disabled').removeClass('checked');
/*当前被点击的label并且里面没有类disabled的就增加类checked和它的前后兄弟关系的label并且不含有类disabled的label都移除类checked*/
});
})
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" >
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="disabled">
<span class="coin"></span>
<input type="radio" id="man-woman" disabled value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>
来吧亲，既然用到了JQ那么我们现在就来简化下代码，是它可以更好的重用吧。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function showRadio(){
if($(".radioList").length){ /*每次执行函数showRadio()的时候判断下时候有.radioList（长度不为0即有.radioList）*/
$(".radioList").each( function() { /*.radioList每次执行方法 showRadio()都把每个.radioList遍历下每个.radioList都执行.checked移除*/
$(this).removeClass('checked')
});
$(".radioList input[type='radio']:checked").each( function() { /*每次执行showRadio()都把选中的按钮删选出来并把所有选出来的按钮的父label标签增加.checked*/
$(this).parent('label').addClass('checked');
});
$(".radioList input[type='radio']:disabled").each( function() { /*每次执行showRadio()都把不能选择的按钮删选出来并把所有选出来的按钮的父label标签增加.disabled*/
$(this).parent('label').addClass('disabled');
});
}
}
$(function(){
$(".radioList").click(function() { /*任何一个.radioList被点击的时候执行 showRadio()*/
showRadio();
});
showRadio(); /*页面载入的时候执行showRadio()*/
}) </script>
<body>
<form action="#">
<label for="man" class="radioList">
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked="checked">男
</label>
<label for="woman" class="radioList">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="radioList">
<span class="coin" class="radioList"></span>
<input type="radio" id="man-woman" disabled="disabled" value="man-woman" name="radtype">
不男不女
</lable>
</form> </body>
</html>
现在我们把代码做最后的一次简化最终效果如下
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.radioList .coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
.radioList{position: relative;padding-left: 10px;margin-left: 20px;}
.radioList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.radio_checked .coin{background-position: -60px -30px;}
.radio_disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var radio_parent=".radioList";
var radio_input=radio_parent+" input[type='radio']";
var checked_radio_css="radio_checked";
var disabled_radio_css="radio_disabled";
function showRadio(){
if($(radio_parent).length){ /*每次执行函数showRadio()的时候判断下时候有.radioList（长度不为0即有.radioList）则执行里面的代码*/
$(radio_parent).each( function() { /*第一步每个.radioList里的样式（.checked）移除一下*/
$(this).removeClass(checked_radio_css)
});
$(radio_input+":checked").each( function() { /*第二步把.radioList里选中的按钮筛选出来并把所有选出来的按钮的父label标签增加.checked*/
$(this).parent(radio_parent).addClass(checked_radio_css);
});
$(radio_input+":disabled").each( function() { /*第三步把radioList里不能选择的按钮删选出来并把所有选出来的按钮的父label标签增加.disabled*/
$(this).parent(radio_parent).addClass(disabled_radio_css);
});
}
}
$(function(){
$(radio_parent).click(function() { /*任何一个.radioList被点击的时候执行 showRadio()*/
showRadio();
});
showRadio(); /*页面载入的时候执行showRadio()*/
}) </script>
<body>
<form action="#">
<label for="man" class="radioList">
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked="checked">男
</label>
<label for="woman" class="radioList">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="radioList">
<span class="coin" class="radioList"></span>
<input type="radio" id="man-woman" disabled="disabled" value="man-woman" name="radtype">
不男不女
</lable>
</form> </body>
</html>
表单美化-原生javascript和jQuery单选按钮（兼容IE6）的更多相关文章
- 表单美化-原生javascript和jQuery多选按钮（兼容IE6）
前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...
- 表单美化-原生javascript和jQuery下拉列表（兼容IE6）
效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...
- JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
- jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
- HTML5——表单美化
闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...
- BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- iCheck表单美化插件使用方法详解（含参数、事件等）
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
随机推荐
- JavaEE基础（二）
1.Java语言基础(常量的概述和使用) A:什么是常量 在程序执行的过程中其值不可以发生改变 B:Java中常量的分类 字面值常量 自定义常量(面向对象部分讲) C:字面值常量的分类 字符串常量 用 ...
- c#之xml
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...
- AndroidManifest.xml 详解
第1部分 标签库+包路径+版本控制 <manifest xmlns:android="http://schemas.android.com/apk/res/android" ...
- 周赛-Colored Sticks 分类： 比赛 2015-08-02 09:33 7人阅读 评论(0) 收藏
Colored Sticks Time Limit: 5000MS Memory Limit: 128000K Total Submissions: 32423 Accepted: 8556 Desc ...
- Python学习笔记-Day2-Python基础之元组操作
元组的常用操作包括但不限于以下操作: 元组的索引,计数等 这里将对列表的内置操作方法进行总结归纳,重点是以示例的方式进行展示. 使用type获取创建对象的类 type(tuple) 使用dir获取类的 ...
- WPF调用office2010的ppt出错
各位热爱WPF编程小伙伴不可避免的会遇到将ppt嵌入到自己编写的软件,可是有时候会遇到错误,此错误值出现在卸载office2013并安装其他版本office时候会出现.这是由于某些机器上offic ...
- 华为S5700S配置总结
需要使用通讯控制线缆连接电脑和交换机, 一头接交换机的Console口,一头接电脑(应该需要串口,没有的话得用USB转串口). 在PC机上运行终端仿真程序,设置终端通信参数为: 波特率为9600bit ...
- repo 官方教程
参考 http://android.git.kernel.org/repo http://source.android.com/source/downloading.html http://sourc ...
- 查看linux发行版本、内核版本命令
查看linux发行版本: $lsb_release -a 查看linux内核版本: $cat /proc/version 或 $uname -a
- 查询mysql数据库中所有用户及用户权限
SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user;