如何更改jQuery Mobile Select菜單的顏色？

如何在不影響同一類的其他元素的情況下動態更改jQuery Mobile中單個選擇菜單的顏色（背景和文本）？我試過幾個方面，包括：如何更改jQuery Mobile Select菜單的顏色？

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

和

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

我也試過之後將其添加刷新無濟於事：

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

我想根據所選值更改顏色，因此我將代碼放置在選擇菜單的更改事件中，如

$("#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/ – 2012-02-02 04:12:05

http://jquerymobile.com/ demos/1.0.1/docs/api/themes.html – 2012-02-02 04:13:13

你可以這樣做：

<!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 2012-02-03 04:56:33

做了這樣的工作嗎？

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

來源

2012-02-02 14:43:56

謝謝，效果很棒！這正是我所期待的！ – orikon 2012-02-03 04:54:35

對於未來的Google員工，除非我還在父級上調用'removeClass（'ui-btn-up-'+ currentTheme）.addClass（'ui-btn-up-e'）'，否則這對我並不適用。之後，它工作得很好。可能是更新的jQm版本的變化。 – Geobits 2013-10-10 17:41:26

您必須刪除ui-btn-hover-x。工作示例：http://jsfiddle.net/3mRBZ/ – Matthieu 2013-10-31 09:11:48

如何更改jQuery Mobile Select菜單的顏色？

回答

相關問題