Как изменить цвет меню jQuery Mobile Select? - PullRequest
Новая
       0

Как изменить цвет меню jQuery Mobile Select?

0 голосов
/ 02 февраля 2012

Как динамически изменить цвет (фон и текст) одного меню выбора в jQuery Mobile, не затрагивая другие элементы того же класса? Я пробовал несколько способов, в том числе: 

$('#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>

Любая помощь по изменению цвета текста или фона приветствуется!

Ответы [ 2 ]

4 голосов
/ 02 февраля 2012

Работает ли что-то подобное? 

$("#select").live("change", function(event, ui) {
    $(this).parent().attr('data-theme','e');
    $('#select').selectmenu('refresh');
});
2 голосов
/ 02 февраля 2012

Вы можете сделать это следующим образом: 

<!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>

Дайте мне знать, если это поможет

...