表单美化-原生javascript和jQuery单选按钮（兼容IE6）

最新推荐文章于 2019-08-17 00:01:39 发布

ruby小酱

最新推荐文章于 2019-08-17 00:01:39 发布

阅读量741

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/raosheng1993/article/details/45421887

版权

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果。

首先我们先来用javascript的方式，不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分。javascript是前端的基础建议大家还是要学习下原生javascript。

我们的想法是：利用单选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。

1：原生javascript美化单选按钮（代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）

我们采取的是把原来的表单元素的透明度改为0，或者直接display：none掉然后添加标签配合脚本模拟点击效果。

下面直接给出demo 童鞋们直接复制就好

[html] view plain copy print ?

<!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)">
<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>

用到的图片

效果

现在我们来完善下代码，增加不能点击功能

[html] view plain copy print ?

<!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)">
<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做的代码简洁了许多，有木有。。。。效果和上面一致

[html] view plain copy print ?

<!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那么我们现在就来简化下代码，是它可以更好的重用吧。

[html] view plain copy print ?

<!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>

现在我们把代码做最后的一次简化最终效果如下

[html] view plain copy print ?

<!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>

代码下载

ruby小酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单美化-原生javascript和jQuery单选按钮（兼容IE6）

最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果。首先我们先来用javascript的方式，不了解原生javascript的童鞋可
复制链接

扫一扫