以编程方式更改翻转开关背景颜色

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");