jQuery UI：如何更改ProgressBar的颜色？
我build立了一个简单的jQueryUI进度条：
<script type="text/javascript"> $(function() { $("#progressbar").progressbar({ value: 35 }); }); </script> <div id="progressbar"> </div> 现在，我想根据其值（例如，<10红色，<50黄色，> 50绿色）对条形图进行着色。 我该怎么做呢？
注：也有类似的问题 ，但答案不够清楚，以帮助我完成任务。 希望有人能指出一个更简单的方法或提供更详细的说明。 谢谢。
我摆弄它，这是我发现的。 使用jQuery UI v1.8rc3，我可以覆盖进度条的主题颜色。
替代文字160wpb4.jpg
这是如何：当您将一个进度条小部件添加到一个div，如下所示：
$("#mydiv").progressbar({value:0});
jQuery UI进度条在div中创build一个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' }); }
好的，这需要照顾设置颜色。 现在，如果要随着值的变化dynamic设置条的颜色，请勾选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
注意：
如果要覆盖所有进度条的颜色，则要使用的CSS类是ui-widget-content ，“背景”或外部div，以及实际栏（对应于内部div）的ui-widget-header 。 喜欢这个：
.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%; }
如果消除.ui-progressbar前缀，它将覆盖所有UI小部件的颜色，包括进度条。
使用下面的代码：
$( "#nahilaga" ).progressbar({ value: 20, create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})} });
jQuery Progressbar使用CSS和图像。
你的Stackoverflow的答案也是一样的：
有一个名为.ui-widget-overlay的css条目，它引用了图像ui-bg_diagonals-thick_20_666666_40x40.png，我认为它是实际驱动进度条的图像。 你将不得不破解的CSS，以便您可以添加一个新的类，在另一个进度条引用您的新形象; 我还没有想出如何做到这一点。
为了改变颜色，你将不得不修改PNG图像。
或者如上所述，您可以复制图像添加第二个类，并使用jquery添加它们：
$(progressBar).addClass('secondImage');
一件简单的事情就是当你使用js中的值初始化进度条时：
$（progressBarId）.children（）.css（'backgroud'，）;
既然你想为不同的进度条使用不同的颜色，你可以这样做：
if($(progressBarId).value() <10 ) //set a color if (..) //set another color
我希望这回答了你的问题。 我尝试着在第一个答案中说出这个人的话，但是却不能正常工作，所以试了一下，就开始工作了。
因为所接受的答案的工作示例似乎不起作用，所以我留下这个答案，以防万一有人发现它有用。
https://jsfiddle.net/benjamintorr/a1h9dtkf/
$(function() { $( ".progressbar" ).each(function(i, obj) { $( this ).progressbar({ value: false }); $( this ).bind('progressbarchange', function(event, ui) { updateColors( this ); }); }); $( "button" ).on("click", function(event) { $( ".progressbar" ).each(function(i, obj) { $( this ).progressbar("option", { value: Math.floor(Math.random() * 100) }); }); }); }); function updateColors( progressBar ) { var value = $( progressBar ).progressbar("value"); if ( value > 50 ) { progressColor = "green"; } else if (value > 10) { progressColor = "#FF9900"; } else { progressColor = "red"; } $( progressBar ).find(".ui-progressbar-value").css("background", progressColor); }
