以編程方式更改翻轉開關背景顏色

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> 

添加一些JavaScript

<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-BTN-活躍，css中的.ui-btn-down-e類用於更改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部分

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