jquery - フリップ スイッチの背景色をプログラムで変更する

Question

jQuery mobile と 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>

ここでは、css の .ui-btn-active,.ui-btn-down-e クラスを使用して、さまざまなブラウザーで背景色を変更します。必要に応じて、ここで色を変更できます。JavaScript を使用して、オンラインとオフラインのテキストの色を変更します。これがフィドルの例ですhttp://jsfiddle.net/arunkumarthekkoot/95gPP/

これがうまくいくことを願っています。

Answer 2

このシンプルなスタイルを追加するとうまくいきます：

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