jquery モバイル カスタム選択メニュー (http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html) でさまざまなオプションをスタイル化することは可能ですか?
私のプロジェクトでは、さまざまなオプションの背景を異なる色にする必要があります。私はしばらくの間探していましたが、解決策に出くわしていません。
助けてくれてありがとう。
jquery モバイル カスタム選択メニュー (http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html) でさまざまなオプションをスタイル化することは可能ですか?
私のプロジェクトでは、さまざまなオプションの背景を異なる色にする必要があります。私はしばらくの間探していましたが、解決策に出くわしていません。
助けてくれてありがとう。
メソッドは常に同じで、nth-child
セレクターを使用して目的の を選択し<li>
ます (そして、<div>
それらの内部の を変更します)。CSS3 (より良い) または jQuery で使用できます。nth-child
element の子と組み合わせる必要がありますul.ui-listview
。このようなもの:
ul.ui-listview > li:nth-child(2n) > div {background-color: green}
ul.ui-listview > li:nth-child(2n+1) > div {background-color: red}
またはjQueryを使用:
$('ul.ui-listview > li:nth-child(2n) > div').css('background-color', 'green');
$('ul.ui-listview > li:nth-child(2n+1) > div').css('background-color', 'red');
jQuery Mobile 1.4.5 では、生成された構造が少し変更されているため、CSS を次のように変更して機能させる必要があります。
#Droplet-menu li:nth-child(1) .ui-btn {background-color:Red; }
#Droplet-menu li:nth-child(1) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(2) .ui-btn {background-color:Blue;}
#Droplet-menu li:nth-child(2) .ui-btn {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
...
これが私がこれを解決した方法です。
これは私の選択メニューです:
<select data-inline="true" data-native-menu="false" data-theme="d" data-val="true" data-val-number="The field DropletId must be a number." data-val-required="The DropletId field is required." id="Droplet" name="Plan.DropletId" style="margin-right:0px;">
<option value="1">Ultra Coarse (UC)</option>
<option value="2">Extra Coarse (XC)</option>
<option selected="selected" value="3">Very Coarse (VC)</option>
<option value="4">Coarse (C)</option>
<option value="5">Medium (M)</option>
<option value="6">Fine (F)</option>
<option value="7">Very Fine (VF)</option>
<option value="8">Extra Fine (XF)</option>
</select>
CSS:
#Droplet-menu li:nth-child(1) > div{background-color:Red; }
#Droplet-menu li:nth-child(1) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(2) > div{background-color:Blue;}
#Droplet-menu li:nth-child(2) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(3) > div{background-color:Green;}
#Droplet-menu li:nth-child(3) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(4) > div{background-color:Yellow;}
#Droplet-menu li:nth-child(4) > div > div > a {color: #333333 !important;}
#Droplet-menu li:nth-child(5) > div{ background-color:Black;}
#Droplet-menu li:nth-child(5) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(6) > div{background-color: Fuchsia;}
#Droplet-menu li:nth-child(6) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
#Droplet-menu li:nth-child(7) > div{background-color:Aqua;}
#Droplet-menu li:nth-child(7) > div > div > a {color: #333333 !important;}
#Droplet-menu li:nth-child(8) > div{background-color:Olive;}
#Droplet-menu li:nth-child(8) > div > div > a {color: #FFFFFF !important; text-shadow: #3373A5 0px 1px 1px}
これにより、jQuery Mobile カスタム選択にさまざまなスタイルが追加されましたが、選択後に選択されたアイテムは必要なスタイルを失いました。
したがって、さらにcss:
.droplet1 {background-color:Red; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet2 {background-color:Blue; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet3 { background-color:Green; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet4 { background-color:Yellow; color: Black;}
.droplet5 { background-color:Black; color: White; text-shadow: #3373A5 0px 1px 1px;}
.droplet6 { background-color: Fuchsia; color: White; text-shadow: #3373A5 0px 1px 1px}
.droplet7 {background-color:Aqua; color: Black;}
.droplet8 { background-color:Olive; color: White; text-shadow: #3373A5 0px 1px 1px;}
...そして少しjquery:
var prevClass = "";
$(document).ready(function () {
var selDroplet = $("#Droplet option:selected").attr('value');
var dropletCssClass = "droplet" + selDroplet;
$('#Droplet-button span:nth-of-type(1)').addClass(dropletCssClass);
});
$("#Droplet").change(function () {
var str = "";
$("#Droplet option:selected").each(function () {
str = "droplet" + $(this).attr('value');
$("#SelectedDroplet").val($(this).attr('value'));
$('#Droplet-button span:nth-of-type(1)').removeClass(prevClass);
$('#Droplet-button span:nth-of-type(1)').addClass(str);
prevClass = str;
});
})
.change();
このコードは、iPad と Samsung Galaxy 10.1 タブレットの両方で動作することがテストされています。
デモ: http://jsfiddle.net/Debarupa/7TsVM/
それが他の誰かを助けることを願っています。
正しい方向に向けてくれた Aurelio De Rosa に感謝します。