我正在使用jQuery mobile和Phonegap开发移动应用程序。所以我的情况是我需要以编程方式更改翻转切换按钮背景颜色。 例如:如果按钮在背景上,则颜色为绿色,否则为红色。我怎么设置这个?
答案 0 :(得分:2)
这是您需要的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/
我希望这对你有用。
答案 1 :(得分:0)
添加这种简单的风格对我有用:
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");
答案 2 :(得分:-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>