jQuery美化select下拉框
生活随笔
收集整理的這篇文章主要介紹了
jQuery美化select下拉框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
想必很多朋友都知道，<select />、<input type="file" />默認(rèn)是不能通過樣式美化的。前幾天在做一個項目的時候恰巧要用到一個select，并想通過樣式美化它。于是在博客園里找了一下相關(guān)的解決辦法，還好找到了一段比較滿意的js。經(jīng)過修改，現(xiàn)在可以兼容各大瀏覽器，并完全模仿<select />來實現(xiàn)相關(guān)功能。
先看看實現(xiàn)的效果：?
實現(xiàn)原理：
模訪select的外觀，用js再構(gòu)造一個"select"。原始的select html代碼如：
原始Html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*global css*/
img{border:0}
ul,li{list-style:none;margin:0;padding:0}
.searchBar{width:590px;height:33px;padding-left:60px;padding-top:7px;margin:40px auto;background:url(images/bg02.gif) no-repeat}
.searchBar .select{float:left;margin-right:8px;display:inline}
.searchBar .text{float:left;margin-right:5px}
.searchBar .text input{width:214px;height:20px;padding-left:4px;line-height:20px;border:1px solid #b7d1eb;color:#aaa}
.btn{vertical-align:middle}
/*---end---*/
/*beautify select box css start*/
.selectbox{width:82px;height:24px;padding-left:4px;line-height:24px;border:none;display:block;cursor:pointer;background:url(images/bg01.gif) no-repeat}
div.selectbox-wrapper{width:63px;border:1px solid #b7d1eb;border-top:none;margin-top:-3px;position:absolute;text-align:left;background-color:#ffffff}
div.selectbox-wrapper ul li{width:59px;padding-left:4px;cursor:pointer;line-height:20px;font-size:12px}
div.selectbox-wrapper ul li.selected{background-color:#e0ecf7}
div.selectbox-wrapper ul li.hover{color:#ffffff;background-color:#36c}
/*---end---*/
</style>
<script src="../js/jquery-1.5.1.min.js"type="text/javascript"></script>
<script src="js/beautifySelect.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.BeautifySelect(document.getElementById("c"));
});
</script>
</head>
<body>
<div class="searchBar">
<div class="select">
<select id="c"style="display:none"name="c">
<option value="1">生活信息</option>
<option value="2">店鋪商家</option>
<option value="3">新聞資訊</option>
<option value="4">團購活動</option>
<option value="5">招聘信息</option>
</select>
</div>
<div class="text">
<input class="s_t"onblur="if(this.value==''){this.value='shuidd.com';this.style.color='#aaa'}"
onfocus="if(this.value=='shuidd.com'){this.value='';this.style.color='#000000'}"
value="shuidd.com"name="keyword"/>
</div>
<a href="#"class="btn"><img src="images/btn.gif"alt=""/></a>
</div>
</body>
</html>
通過js構(gòu)造出來的"select"代碼如：
通過js構(gòu)造出來的html <div class="searchBar"><div class="select">
<input type="text"id="c_input"class="selectbox"autocomplete="off"readonly=""tabindex="0">
<div id="c_container"class="selectbox-wrapper"style="display:none">
<ul>
<li id="c_input_1"class="selected">生活信息</li>
<li id="c_input_2"class="">店鋪商家</li>
<li id="c_input_3"class="">新聞資訊</li>
<li id="c_input_4"class="">團購活動</li>
<li id="c_input_5"class="">招聘信息</li>
</ul>
</div>
<select name="c"style="display:none"id="c">
<option value="1">生活信息</option>
<option value="2">店鋪商家</option>
<option value="3">新聞資訊</option>
<option value="4">團購活動</option>
<option value="5">招聘信息</option>
</select>
</div>
<div class="text">
<input name="keyword"value="shuidd.com"onfocus="if(this.value=='shuidd.com'){this.value='';this.style.color='#000000'}"onblur="if(this.value==''){this.value='shuidd.com';this.style.color='#aaa'}"class="s_t"style="color: rgb(170, 170, 170);">
</div>
<a class="btn"href="#"><img alt=""src="images/btn.gif"></a>
</div>
然后js將原始select中的項全部復(fù)制到一個ul的li中，并附上css樣式來實現(xiàn)美化 ul li，來實現(xiàn)美化構(gòu)造出的"select”，js代碼如下：
beautifySelect.js /*!* Date: 2011-3-29
* Author: musical_insect
* Content: beautify select box by jQuery and css
*/
jQuery.fn.extend({
beautifyselect: function(options) {
returnthis.each(function() {
newjQuery.BeautifySelect(this, options);
});
}
});
/*pawel maziarz: work around for ie logging */
if(!window.console) {
varconsole ={
log: function(msg) {}
}
};
jQuery.BeautifySelect =function(selectobj, options) {
/// <summary>
/// beautify select
/// </summary>
/// <param name="selectobj" type="Dom">select object</param>
/// <param name="options" type="object">options,format:{inputClass:selectbox,containerClass:selectbox-wrapper,hoverClass:hover,selectedClass:selected}</param>
varopt =options ||{};
opt.inputClass =opt.inputClass ||"selectbox";
opt.containerClass =opt.containerClass ||"selectbox-wrapper";
opt.hoverClass =opt.hoverClass ||"hover";
opt.currentClass =opt.selectedClass ||"selected";
opt.debug =opt.debug ||false;
varelm_id =selectobj.id;
varactive =0;
varhasfocus =0;
//jquery object for select element
var$select =$(selectobj);
//jquery container object
var$container =setupContainer(opt);
//jquery input object
var$input =setupInput(opt);
//hide select and append newly created elements
$select.hide().before($input).before($container);
init();
$input.click(function(event) {
$container.toggle();
}).keydown(function(event) {
switch(event.which) {
case38: //up
event.preventDefault();
moveSelect(-1);
break;
case40: //down
event.preventDefault();
moveSelect(1);
break;
//case 9: // tab
case13: //enter
event.preventDefault(); //seems not working in mac !
$('li.'+opt.hoverClass).trigger('click');
break;
case27: //escape
hideMe();
break;
}
}).blur(function() {
if($container.is(':visible') &&hasfocus >0) {
if(opt.debug) console.log('container visible and has focus')
} else{
try{
//Workaround for ie scroll - thanks to Bernd Matzner
if($.browser.msie ||$.browser.safari) { //check for safari too - workaround for webkit
if(document.activeElement.getAttribute('id').indexOf('_container') ==-1) {
hideMe();
} else{
$input.focus();
}
} else{
hideMe();
}
} catch(Error) { hideMe(); }
}
});
//隱藏下拉菜單容器
functionhideMe() {
hasfocus =0;
$container.hide();
}
//初始化下拉菜單
functioninit() {
$container.append(getSelectOptions($input.attr('id'))).hide();
}
//初始化下拉菜單容器并進(jìn)行相關(guān)設(shè)置
functionsetupContainer(options) {
varcontainer =document.createElement("div");
$container =$(container);
$container.attr('id', elm_id +'_container');
$container.addClass(options.containerClass);
return$container;
}
//初始化下拉菜單并進(jìn)行相關(guān)設(shè)置
functionsetupInput(options) {
varinput =document.createElement("input");
var$input =$(input);
$input.attr("id", elm_id +"_input");
$input.attr("type", "text");
$input.addClass(options.inputClass);
$input.attr("autocomplete", "off");
$input.attr("readonly", "readonly");
$input.attr("tabIndex", $select.attr("tabindex")); //"I" capital is important for ie
return$input;
}
//處理下拉菜單響應(yīng)鍵盤上的上、下鍵
functionmoveSelect(step) {
varlis =$("li", $container);
if(!lis ||lis.length ==0) returnfalse;
active +=step;
//loop through list
if(active <0) {
active =lis.size() -1;
} elseif(active >lis.size() -1) {
active =0;
}
scroll(lis, active);
lis.removeClass(opt.hoverClass);
$(lis[active]).addClass(opt.hoverClass);
$input.val($(lis[active]).html());
}
functionscroll(list, active) {
varel =$(list[active]).get(0);
varlist =$container.get(0);
if(el.offsetTop +el.offsetHeight >list.scrollTop +list.clientHeight) {
list.scrollTop =el.offsetTop +el.offsetHeight -list.clientHeight;
} elseif(el.offsetTop <list.scrollTop) {
list.scrollTop =el.offsetTop;
}
}
//處理當(dāng)前選擇中的值
functionsetCurrent() {
varli =$("li."+opt.currentClass, $container).get(0);
varar =(''+li.id).split('_');
varel =ar[ar.length -1];
$select.val(el);
$input.val($(li).html());
returntrue;
}
//獲取當(dāng)前選中項的索引
functiongetCurrentSelected() {
return$select.val();
}
//獲取當(dāng)前選中項的值
functiongetCurrentValue() {
return$input.val();
}
//獲取下拉菜單的選擇項
functiongetSelectOptions(parentid) {
varselect_options =newArray();
varul =document.createElement('ul');
$select.children('option').each(function() {
varli =document.createElement('li');
li.setAttribute('id', parentid +'_'+$(this).val());
li.innerHTML =$(this).html();
if($(this).is(':selected')) {
$input.val($(this).html());
$(li).addClass(opt.currentClass);
}
ul.appendChild(li);
$(li).mouseover(function(event) {
hasfocus =1;
if(opt.debug) console.log('over on : '+this.id);
jQuery(event.target, $container).addClass(opt.hoverClass);
}).mouseout(function(event) {
hasfocus =-1;
if(opt.debug) console.log('out on : '+this.id);
jQuery(event.target, $container).removeClass(opt.hoverClass);
}).click(function(event) {
varfl =$('li.'+opt.hoverClass, $container).get(0);
if(opt.debug) console.log('click on :'+this.id);
$('#'+elm_id +'_container'+'li.'+opt.currentClass).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
//$select.change();
$select.get(0).blur();
hideMe();
});
});
returnul;
}
};
轉(zhuǎn)載于:https://www.cnblogs.com/rmbteam/archive/2011/11/18/2254714.html
總結(jié)
以上是生活随笔為你收集整理的jQuery美化select下拉框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 一些常用的代码（转载）
- 下一篇： Oracle Golden Gate 系