<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>統一下拉列表樣式並實現select樣式高度自定義的jQuery插件@Mr.Think</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<meta name="author" content="Mr.Think又名青鳥簡稱i" />
<meta name="keywords" content="i,Mr.Think,前端開發,WEB前端,前端技術,前端開發,WEB前端開發,用戶體驗,網站策劃,網站優化,青鳥,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鳥的博客,PHP愛好者" />
<meta name="description" content="Mr.Think的博客,中文網名青鳥,現專注於WEB前端開發,同時也是一位PHP的愛好者.愛思考,有點代碼潔癖,生吃過螃蟹腿,喜好肉食.這裡是我記錄知識與生活瑣事的地方." />
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
p{float:left;margin:20px;font-size:14px}
/*style for iSimulateSelect*/
.i_selectbox{margin-top:20px;height:32px;position:relative;font-size:14px}
.i_selectbox .i_currentselected{width:220px;height:32px;background:#fff url(http://mrthink.net/demo/images/bg-select.gif) right top no-repeat;border:1px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-indent:10px;line-height:32px;cursor:pointer}
.i_selectbox .i_selectoption{overflow-x:hidden;overflow-y:auto;position:absolute;left:-5px;top:-2px;padding:5px;background-color:#fff;background:rgba(255,255,255,.9);-webkit-box-shadow:-2px 3px 5px rgba(0,0,0,.3);-moz-box-shadow:-2px 3px 5px rgba(0,0,0,.3);box-shadow:-2px 3px 5px rgba(0,0,0,.3);border-radius:5px;border-right:1px solid #eee}
.i_selectbox .i_selectoption dt{height:24px;background-color:#eee;text-indent:5px;font-style:italic;color:#555;line-height:24px;}
.i_selectbox .i_selectoption dd{height:30px;border-bottom:1px dashed #ccc;cursor:pointer;text-indent:10px;line-height:30px}
.i_selectbox .i_selectoption dd:hover{background-color:#888;color:#fff}
.i_selectbox .i_selectoption dd.selected{background-color:#555;color:#fff}
</style>
</head>
<body>
<div id="d_head">
<h1><a title="返回Mr.Think的博客" href="http://mrthink.net/">Mr.Think的博客</a><em>可自由轉載及使用,但請注明出處.</em></h1>
<h2><span><a title="訂閱Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@專注Web前端技術, 熱愛PHP, 崇尚簡單生活的凡夫俗子.</h2>
</div>
<div class="return">返回文章頁:<a href="http://mrthink.net/jquery-select-iSimulateSelect/">統一下拉列表樣式並實現select樣式高度自定義的jQuery插件@Mr.Think</a></div>
<!--DEMO start-->
<div id="demo">
<p>
<select class="iselect">
<optgroup label="戰國大家">
<option value="0">請選擇你喜歡的人</option>
<option value="1">墨子</option>
<option value="2">老子</option>
<option value="3">莊子</option>
<option value="4">荀子</option>
</optgroup>
<optgroup label="秦國將軍">
<option value="5">蒙恬</option>
<option value="6">王贲</option>
<option value="7">王翦</option>
<option value="8">白起</option>
<option value="9">司馬錯</option>
</optgroup>
<optgroup label="秦國名臣">
<option value="10">蒙毅</option>
<option value="11">李斯</option>
<option value="12">張儀</option>
<option value="13">衛鞅</option>
</optgroup>
</select>
</p>
<p>
<select class="iselect">
<option value="1">秦孝公(前361—前338年)</option>
<option value="2">秦惠文王(前337—前311年)</option>
<option value="4">秦昭襄王(前306—前251年)</option>
<option value="5">秦孝文王(前250年)</option>
<option value="6">秦莊襄王(前250—前247年)</option>
<option value="7" selected="selected">秦始皇帝(前246—前210年)</option>
<option value="8">秦二世(前209—前207年)</option>
<option value="9">秦王子嬰(前206年)</option>
</select>
</p>
<select style="float:right">
<option value="0">我是個沒穿衣服的select囧囧囧</option>
<option value="1">我是個沒穿衣服的select囧囧囧</option>
<option value="2">我是個沒穿衣服的select囧囧囧</option>
<option value="3">我是個沒穿衣服的select囧囧囧</option>
<option value="4">我是個沒穿衣服的select囧囧囧</option>
</select>
</div>
<script>
;(function($){
/*
* 統一select樣式並實現樣式高度自定義的jQuery插件@Mr.Think(http://mrthink.net/)
*/
$.fn.iSimulateSelect=function(iSet){
iSet=$.extend({
selectBoxCls:'i_selectbox', //string類型,外圍class名
curSCls:'i_currentselected',//string類型,默認顯示class名
optionCls:'i_selectoption',//string類型,下拉列表class名
selectedCls:'selected',//string類型,當前選中class名
width:222,//number類型，模擬select的寬度
height:300,//number類型，模擬select的最大高度
zindex:20//層級順序
},iSet||{});
this.hide();
return this.each(function(){
var self=this;
var thisCurVal,thisSelect,cIndex=0;
//計算模擬select寬度
if(iSet.width==0){
iSet.width=$(self).width();
}
var html='<div class="'+iSet.selectBoxCls+'" style="z-index:'+iSet.zindex+'"><div class="'+iSet.curSCls+'" style="width:'+iSet.width+'px">'+$(self).find('option:selected').text()+'</div><dl class="'+iSet.optionCls+'" style="display:none;width:'+iSet.width+'px">';
//判斷select中是否有optgroup
//用dt替代optgroup，用dd替代option
if($(self).find('optgroup').size()>0){
$(this).find('optgroup').each(function(){
html+='<dt>'+$(this).attr('label')+'</dt>';
$(this).find('option').each(function(){
if($(this).is(':selected')){
html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
}else{
html+='<dd>'+$(this).text()+'</dd>';
}
});
});
}else{
$(this).find('option').each(function(){
if($(this).is(':selected')){
html+='<dd class="'+iSet.selectedCls+'">'+$(this).text()+'</dd>';
}else{
html+='<dd>'+$(this).text()+'</dd>';
}
});
}
//將模擬dl插入到select後面
$(self).after(html);
//當前模擬select外圍box元素
thisBox=$(self).next('.'+iSet.selectBoxCls);
//當前模擬select初始值元素
thisCurVal=thisBox.find('.'+iSet.curSCls);
//當前模擬select列表
thisSelect=thisBox.find('.'+iSet.optionCls);
/*
若同頁面還有其他原生select,請前往https://github.com/brandonaaron/bgiframe下載bgiframe，同時在此處調用thisSelect.bgiframe()
*/
//thisSelect.bgiframe();
//彈出模擬下拉列表
thisCurVal.click(function(){
$('.'+iSet.optionCls).hide();
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
$(self).next('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex+1);
thisSelect.show();
});
//若模擬select高度超出限定高度，則自動overflow-y:auto
if(thisSelect.height()>iSet.height){
thisSelect.height(iSet.height);
}
//模擬列表點擊事件-賦值-改變y坐標位置-...
thisSelect.find('dd').click(function(){
$(this).addClass(iSet.selectedCls).siblings().removeClass(iSet.selectedCls);
cIndex=thisSelect.find('dd').index(this);
thisCurVal.text($(this).text());
$(self).find('option').eq(cIndex).attr('selected','selected');
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
thisSelect.hide();
});
//非模擬列表處點擊隱藏模擬列表
//$(document)點擊事件不兼容部分移動設備
$('html,body').click(function(e){
if(e.target.className.indexOf(iSet.curSCls)==-1){
thisSelect.hide();
$('.'+iSet.selectBoxCls).css('zIndex',iSet.zindex);
}
});
//取消模塊列表處取消默認事件
thisSelect.click(function(e){
e.stopPropagation();
});
});
}
})(jQuery);
$(function(){
//插件調用
$('.iselect').iSimulateSelect();
})
</script>
<!--DEMO end-->
<!--@Mr.Think的統計及廣告代碼,使用樣例請勿復制:)-->
<div class="clear"></div>
<div id="adsense"></div>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!--@end-->
</body>
</html>