欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用jQuery實(shí)現(xiàn)的模擬下拉框代碼

 更新時(shí)間：2010年03月08日 18:21:57   作者：  
用jQuery制作模擬下拉框 瀏覽器自帶的 下拉框樣式不好看。在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。
很多群?jiǎn)T問了關(guān)于下拉框美化的問題，現(xiàn)打一個(gè)下拉框美化的制作過程，其實(shí)是模擬出來的下拉框。
問題1：為什么要模擬下拉框？
1，瀏覽器自帶的 下拉框樣式不好看。
2，在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。
OK，明白這個(gè)問題后，我們就開始用jQuery制作模擬下拉框。

第一步：先搭建好結(jié)構(gòu)
這是普通的下拉框代碼：
XML/HTML代碼
復(fù)制代碼 代碼如下:

<select name="abc" id="abc">
<option value="1">選項(xiàng)一</option>
<option value="2">選項(xiàng)二</option>
<option value="3">選項(xiàng)三</option>
<option value="4">選項(xiàng)四</option>
<option value="5">選項(xiàng)五</option>
<option value="6">選項(xiàng)六</option>
</select>

這個(gè)是模擬出來的：
XML/HTML代碼
復(fù)制代碼 代碼如下:

<div class="CRselectBox">
<input type="hidden" value="" name="abc" id="abc"/> <!-- hidden 用來代替select的值 -->
<input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/> <!-- hidden 用來代替select的文本-->
<a class="CRselectValue" href="#">選項(xiàng)一</a>
<ul class="CRselectBoxOptions">
<li class="CRselectBoxItem"><a href="#" class="selected" rel="1">選項(xiàng)一</a></li>
<li class="CRselectBoxItem"><a href="#" rel="2">選項(xiàng)二</a></li>
<li class="CRselectBoxItem"><a href="#" rel="3">選項(xiàng)三</a></li>
<li class="CRselectBoxItem"><a href="#" rel="4">選項(xiàng)四</a></li>
<li class="CRselectBoxItem"><a href="#" rel="5">選項(xiàng)五</a></li>
<li class="CRselectBoxItem"><a href="#" rel="6">選項(xiàng)六</a></li>
</ul>
</div>


[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

第二步：構(gòu)建效果
主要就是Jquery代碼：
JavaScript代碼
復(fù)制代碼 代碼如下:

$(function(){
$(".CRselectBox").hover(function(){
$(this).addClass("CRselectBoxHover");
},function(){
$(this).removeClass("CRselectBoxHover");
});
$(".CRselectValue").click(function(){
$(this).blur();
$(".CRselectBoxOptions").show();
return false;
});
$(".CRselectBoxItem a").click(function(){
$(this).blur();
var value = $(this).attr("rel");
var txt = $(this).text();
$("#abc").val(value);
$("#abc_CRtext").val(txt);
$(".CRselectValue").text(txt);
$(".CRselectBoxItem a").removeClass("selected");
$(this).addClass("selected");
$(".CRselectBoxOptions").hide();
return false;
});
/*點(diǎn)擊任何地方關(guān)閉層*/
$(document).click(function(event){
if( $(event.target).attr("class") != "CRselectBox" ){
$(".CRselectBoxOptions").hide();
}
});
/*===================Test========================*/
$("#test").click(function(){
var value = $("#abc").val();
var txt = $("#abc_CRtext").val();
alert( "你本次選擇的值和文本分別是：" + value +" , "+txt );
});
})


[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

其實(shí)到這里已經(jīng)算是完成了。為了方便利用，就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html

完整實(shí)例打包下載

相關(guān)文章

最新評(píng)論