jQuery Mobile Selectメニューの色を変更するには？

同じクラスの他の要素に影響を与えずに、jQuery Mobileで単一の選択メニューの色（背景とテキスト）を動的に変更するにはどうすればよいですか？私を含むいくつかの方法、試してみた：jQuery Mobile Selectメニューの色を変更するには？

$('#select').selectmenu('refresh');

私がしようとしている：私も無駄にした後、リフレッシュを追加しようとしました

$('#select').css({color:#000});

と

$('#select').removeClass('ui-btn-up-a').addClass('custom-class');

を選択した値に基づいて色を変更するため、選択メニューの変更イベント内にコードを配置します。

次のように

$("#select").live("change", function(event, ui) { 
    ... 
}

私のHTMLは次のとおりです。文字色や背景色を変更するに

<select name="select" id="select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select>

すべてのヘルプは歓迎です！

出典

2012-02-02 orikon

http://jquerymobile.com/themeroller/ –

http://jquerymobile.com/を助けている場合、私に教えてくださいデモ/ 1.0.1/docs/api/themes.html –

あなたはこの方法でこれを行うことができます。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
    $("#page").live("pagecreate",function(){ 

     $("#select1").live("change", function(event, ui) { 
      switch($("#select1").val()){ 
       case "1": 
        $("#fc .ui-select .ui-btn-up-c").removeClass('green red black').addClass('blue'); 
        break; 
       case "2": 
        $("#fc .ui-select .ui-btn-up-c").removeClass('blue red black').addClass('green'); 
        break; 
       case "3": 
        $("#fc .ui-select .ui-btn-up-c").removeClass('green blue black').addClass('red'); 
        break; 
       case "4": 
        $("#fc .ui-select .ui-btn-up-c").removeClass('green red blue').addClass('black'); 
        break; 
      } 
     }); 

     $("#select1").selectmenu({ 
      create: function(event, ui){ 
       $("#fc .ui-select .ui-btn-up-c").addClass('blue'); 
      } 
     }); 

    }); 
</script> 

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
<style> 

.blue{ 
    color:blue; 
    background:cyan; 
} 
.green{ 
    color:green; 
    background:coral; 
} 
.red{ 
    color:red; 
    background:ivory; 
} 
.black{ 
    color:black; 
    background:lavender; 
} 
</style> 
</head> 
<body> 

<div data-role="page" id="page"> 


    <div data-role="content"> 

<div data-role="fieldcontain" id="fc"> 
    <select name="select1" id="select1"> 
     <option value="1">Blue</option> 
     <option value="2">Green</option> 
     <option value="3">Red</option> 
     <option value="4">Black</option> 
    </select> 
</div> 
    </div><!-- /content --> 
</div><!-- /page --> 

</body> 
</html>

はそれが

出典

2012-02-02 16:22:17 user700284

ありがとうございました！これは間違いなく役立ちます:) – orikon

このような機能はありますか？

$("#select").live("change", function(event, ui) { 
    $(this).parent().attr('data-theme','e'); 
    $('#select').selectmenu('refresh'); 
});

出典

2012-02-02 14:43:56

ありがとう、素晴らしい作品！それはまさに私が探していたものです！ – orikon

将来のGoogle社員にとっては、親に対してもremoveClass（ 'ui-btn-up-' + currentTheme）.addClass（ 'ui-btn-up-e'）も呼び出すまで、これは私にとってはうまくいきませんでした。その後、正常に動作しました。新しいjQmバージョンの変更かもしれません。 – Geobits

ui-btn-hover-xも削除する必要があります。実例：http://jsfiddle.net/3mRBZ/ – Matthieu

jQuery Mobile Selectメニューの色を変更するには？

答えて

関連する問題