Изменение цвета фона переключателя программно

Question

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

Answer 1

Вот CSS для вашей потребности

<style> 
.ui-btn-active { 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#44C723),to(#317220)); 
    background-image: -webkit-linear-gradient(#44C723,#317220); 
    background-image: -moz-linear-gradient(#44C723,#317220); 
    background-image: -ms-linear-gradient(#44C723,#317220); 
    background-image: -o-linear-gradient(#44C723,#317220); 
    background-image: linear-gradient(#44C723,#317220) 
} 
.ui-btn-down-e{ 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#d2232b),to(#d2232b)); 
    background-image: -webkit-linear-gradient(#d2232b,#d2232b); 
    background-image: -moz-linear-gradient(#d2232b,#d2232b); 
    background-image: -ms-linear-gradient(#d2232b,#d2232b); 
    background-image: -o-linear-gradient(#d2232b,#d2232b); 
    background-image: linear-gradient(#d2232b,#d2232b) 

} 
.online { color: yellow !important } // for changing text color 
.offline { color: #fff !important } // for changing text color 
</style> 

Добавьте яваскрипта

<script> 
$('[role=application] span:first-child').addClass('online'); 
$('[role=application] span:nth-child(2)').addClass('offline'); 
</script> 

Это ваш HTML

<div id="switch"> 
    <select name="toggleswitch1" id="toggleswitch1" data-track-theme="e" data-role="slider"> 
     <option value="off"> Offline </option> 
     <option value="on"> Online </option> 
    </select> 
</div> 

Здесь .ui-БТН-активный , .ui-btn-down-e class в css используется для изменения t он цвет фона в разных браузерах, вы можете изменить свой цвет здесь, если это необходимо. javascript используется для изменения цвета текста онлайн и офлайн. Вот пример скрипки http://jsfiddle.net/arunkumarthekkoot/95gPP/

Я надеюсь, что это сработает для вас.

Answer 2

**CSS** 
    <style> 
      .green { 
       background: green; 
      } 
      .red { 
       background: red; 
      } 
    </style> 

    **html** 
    <a href="" class="green" id="btn" data-role="none">Button</a> 

    **Javascript** 
    <script> 
     $("#btn").on("click",function(){ 

     if($(this).hasClass("green")){ 
      $(this).removeClass("green"); 
      $(this).addClass("red"); 
      return; 
     }if($(this).hasClass("red")){ 
      $(this).removeClass("red"); 
      $(this).addClass("green"); 
      return; 
     } 
     }); 

    </script> 

Answer 3

Добавление этого простого стиля работает для меня:

CSS часть

.ui-slider-track .ui-btn-active { 
    background-color: green !important; 
} 

Для полноты коды, вот остальные части ...
HTML части

<label for="flipSwitch">On/Off</label> 
<select name="flipSwitch" id="idFlipSwitch" data-role="slider"> 
    <option value="on">On</option> 
    <option value="off">Off</option> 
</select> 

Наконец jQuery part

$("#idFlipSwitch").val("on").slider("refresh");