我设置了一个简单的jQueryUI进度条：
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
现在，我想根据它的值(例如< 10红色，< 50黄色，> 50绿色)对条形的颜色。我如何做到这一点？
注意：有similar questions，但答案不够清楚，以帮助我完成的事情。希望有人能指出一个更简单的方法或提供更详细的指示。谢谢。
解决方法
我搞砸了，这是我发现的。使用jQuery UI v1.8rc3，我可以覆盖进度条的主题颜色。
$("#mydiv").progressbar({value:0});
… jQuery UI progressbar在div中创建一个div;这个内部div表示值栏。要设置条的颜色，请设置背景
子(内)div。
您还可以设置进度条中空白空间的颜色，值栏右侧的空间。通过设置外部div的背景来做到这一点。
对于这些，您可以使用平面颜色或图像。如果使用图像，请务必设置repeat-x。代码这样做，看起来像这样：
html：
<div id='mainObj' class="inputDiv"> <div id='pbar0' style="height: 20px;"></div> <div id='pbar1' style="height: 20px;"></div> <div id='pbar2' style="height: 20px;"></div> <div id='pbar3' style="height: 20px;"></div> </div>
js：
function init(){
// four progress bars
$("#pbar0").progressbar({ "value": 63 });
$("#pbar1").progressbar({ "value": 47 });
$("#pbar2").progressbar({ "value": 33 });
$("#pbar3").progressbar({ "value": 21 });
// the zero'th progressbar gets the default theme
// set colors for progressbar #1
$("#pbar1").css({ 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' });
$("#pbar1 > div").css({ 'background': 'url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;' });
// set colors for progressbar #2
$("#pbar2").css({ 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' });
$("#pbar2 > div").css({ 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' });
// set colors for progressbar #3
$("#pbar3").css({ 'background': 'LightYellow' });
$("#pbar3 > div").css({ 'background': 'Orange' });
}
确定，那照顾设置的颜色。现在，
如果你想动态设置条的颜色值的变化，你钩的progressbarchange事件，像这样：
$("#pbar0").bind('progressbarchange',function(event,ui) {
var selector = "#" + this.id + " > div";
var value = this.getAttribute( "aria-valuenow" );
if (value < 10){
$(selector).css({ 'background': 'Red' });
} else if (value < 30){
$(selector).css({ 'background': 'Orange' });
} else if (value < 50){
$(selector).css({ 'background': 'Yellow' });
} else{
$(selector).css({ 'background': 'LightGreen' });
}
});
工作示范：http://jsbin.com/atiwe3/3
注意：
如果要覆盖所有progressbars的颜色，使用的css类是ui-widget-content，用于“background”或外部div，以及ui-widget-header用于实际条(对应于内部div)。喜欢这个：
.ui-progressbar.ui-widget-content {
background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%;
}
.ui-progressbar.ui-widget-header {
color: Blue;
background: url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;
}
