文章出處

最近很多人問怎么美化表單的元素，大家都知道表單元素在各個瀏覽器中的表現不一，反正也是特別的丑，那么問題就來了，我們能自己設計表單元素的外觀么？答案是可以的，現在我們就來試試吧。我們用兩種方式來實現這一效果，一種是用原生的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>


代碼下載


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄