jQuery UI：如何更改 ProgressBar 的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1476573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI: How to change the color of a ProgressBar?
提问by Thorsten
I've set up a simple jQueryUI progressbar:
我已经设置了一个简单的 jQueryUI 进度条：
<script type="text/javascript">
$(function() {
$("#progressbar").progressbar({
value: 35
});
});
</script>
<div id="progressbar"> </div>
Now, I'd like to color the of the bar based on it's value (e.g. <10 red, <50 yellow, >50 green). How do I do this?
现在，我想根据它的值（例如<10 红色、<50 黄色、> 50 绿色）为条形着色。我该怎么做呢？
Note: There are similar questions, but the answers were not clear enough to help me get things done. Hopefully, someone can point out an easier way or provide more detailed instructions. Thanks.
注意：有类似的问题，但答案不够清楚，无法帮助我完成任务。希望有人可以指出更简单的方法或提供更详细的说明。谢谢。
回答by Cheeso
I fiddled around with it and here's what I found. Using jQuery UI v1.8rc3, I can override the theme colors for the progress bar.
我摆弄了一下，这就是我发现的。使用 jQuery UI v1.8rc3，我可以覆盖进度条的主题颜色。
Here's how: When you add a progressbar widget to a div, with something like:
方法如下：当您将进度条小部件添加到 div 时，例如：
$("#mydiv").progressbar({value:0});
...the jQuery UI progressbar creates a div within your div; this inner div represents the value bar. To set the color of the bar, set the background of the child (inner) div.
...jQuery UI 进度条在您的 div 中创建一个 div；这个内部 div 代表值栏。要设置栏的颜色，请设置子（内部）div 的背景。
You can also set the color of the empty space in the progress bar, the space to the right of the value bar. Do this by setting the background of the outer div.
您还可以设置进度条中空白区域的颜色，即值栏右侧的空间。通过设置外部 div 的背景来做到这一点。
For either of these, you can use flat colors, or images. If you use images, then be sure to set the repeat-x. The code to do that, looks like this:
对于其中任何一个，您都可以使用平面颜色或图像。如果你使用图像，那么一定要设置repeat-x。执行此操作的代码如下所示：
html:
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:
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' });
}
ok, that takes care of setting the colors. Now, if you want to dynamically set the color of the bar as the value changes, you hook the progressbarchange event, like this:
好的，它负责设置颜色。现在，如果您想在值更改时动态设置栏的颜色，您可以挂钩 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' });
}
});
Working demonstration: http://jsbin.com/atiwe3/3
工作演示：http: //jsbin.com/atiwe3/3
Note:
笔记：
If you want to override the colors for all progressbarsthe css classes to use are ui-widget-content, for the "background" or outer div, and ui-widget-headerfor the actual bar (corresponding to the inner div). Like this:
如果要覆盖所有进度条的颜色，则要使用的 css 类是ui-widget-content“背景”或外部 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%;
}
If you eliminate the .ui-progressbarprefix, it will override the colors of all UI widgets, including progressbars.
如果消除.ui-progressbar前缀，它将覆盖所有 UI 小部件的颜色，包括进度条。
回答by Sirisha Naidu G
Use the following code:
使用以下代码：
$( "#nahilaga" ).progressbar({
value: 20,
create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})}
});
回答by jantimon
jQuery Progressbar uses CSS and images.
jQuery Progressbar 使用 CSS 和图像。
Your Stackoverflow answer says the same:
你的 Stackoverflow 回答说的是一样的：
there is a css entry called .ui-widget-overlay that references the image ui-bg_diagonals-thick_20_666666_40x40.png, which I think is the image that actually drives the progress bar. You will have to hack the css so that you can add a new class that references your new image in the other progress bar; I haven't figured out how to do that yet.
有一个名为 .ui-widget-overlay 的 css 条目引用了图像 ui-bg_diagonals-thick_20_666666_40x40.png，我认为这是实际驱动进度条的图像。您将不得不修改 css，以便您可以在另一个进度条中添加一个引用新图像的新类；我还没有想出如何做到这一点。
In order to change the color you would have to modify the png image.
为了更改颜色，您必须修改 png 图像。
Or as written above you could copy the image add a second class and add them using jquery:
或者如上所述，您可以复制图像添加第二个类并使用 jquery 添加它们：
$(progressBar).addClass('secondImage');
回答by user590849
One simple thing would be when you are initializing the progress bar with values in your js you do :
一件简单的事情是，当您使用 js 中的值初始化进度条时：
$(progressBarId).children().css('backgroud',) ;
Since you want different colors for different progressbars, you can do :
由于您希望不同的进度条具有不同的颜色，您可以执行以下操作：
if($(progressBarId).value() <10 )
//set a color
if (..)
//set another color
I hope this answers your question. I tried doing what the guy has said in the first answer, but could not get it to work so tried this and it started working.
我希望这回答了你的问题。我试着按照那个人在第一个答案中所说的去做，但无法让它工作，所以尝试了这个，它开始工作了。
回答by Benjamin Torres
Because the working example on the accepted answers seems not to be working, I leave this one based in his answer in case anyone finds it useful.
由于已接受答案的工作示例似乎不起作用，因此我将这个示例保留在他的答案中，以防万一有人觉得它有用。
https://jsfiddle.net/benjamintorr/a1h9dtkf/
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);
}
