[英]jquery select-box - how can I have two inputs different widths
我正在使用此jquery插件使我的選擇下拉框看起來更好。 http://code.google.com/p/select-box/
這是一個有效的工具: http : //jsfiddle.net/FQKax/1/
我想讓兩個下拉列表具有不同的寬度,但是我嘗試將它們包裝在div中,試圖破解js以給它們提供不同的id,我能想到的一切都沒有喜悅。
我也很ham愧地承認我似乎無法更改實際下拉位中文本的顏色。 我可以更改背景色等,但是如果可以更改文本的顏色會感到困惑……很奇怪
有一個選項,您可以指定用作sbHolder
對象的類名的sbHolder
,但是您不想更改它,因為您需要重寫CSS。 如果他們讓您設置一個附加的類來應用,那很好,但他們沒有。
我只是將包裹器包裹在select元素上,並使用CSS覆蓋默認寬度http://jsfiddle.net/FQKax/8/
.wrapper-one .sbHolder{
width: 500px;
}
.wrapper-two .sbHolder {
width: 200px;
}
<div class="wrapper-one">
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
<br/><br/>
<div class="wrapper-two">
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
這需要添加一些標記,@cih的答案不需要。 它只需要使用jQuery相應地標記每個實例http://jsfiddle.net/FQKax/37/
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(index){
$(this).addClass('instance-' + index);
});
.instance-0.sbHolder{
width: 500px;
}
.instance-1.sbHolder {
width: 200px;
}
$(".sbHolder").first().addClass("first");
這將添加一個您可以在您的第一個復選框上定位的類,那里是更好的方法來遍歷多個選擇器,請查看此鏈接。
除此之外,喬回答了其余的問題。
試試這個http://jsfiddle.net/FQKax/30/
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<br/><br/>
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
##### JQUERY #######
$(function () {
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(){
var $langDom = $(this);
if($langDom.prev().attr('id') == 'language'){
$langDom.addClass("language_1");
} else if($langDom.prev().attr('id') == 'language2') {
$langDom.addClass("language_2");
}
});
});
###### CSSS TO ADD #####
.language_1{
width: 1200px;
}
.language_2{
width: 200px;
}
對於文本顏色,更改.sbOptions a:link, .sbOptions a:visited {}
和/或.sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}
。
對於寬度, .sbOptions
是您的下拉寬度, .sbHolder {}
是“當前選定”項目的寬度。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.