动态更改jQuery Progress Bar的颜色 [英] Dynamically change the color of jQuery Progress Bar

问题描述

我有一个动态的JQuery进度条我想要主题（文档这里）：它会从红色开始，然后随着它的进展变成黄色，最后变成绿色。看起来这只是设置样式颜色属性的问题，但我似乎找不到合适的属性。

I have a JQuery progress bar I want to theme (documentation here) dynamically: it will start out red, then as it progresses turn yellow, and finally turn green. It seems like this would just be a matter of setting a style color attribute, but I can't seem to find what the appropriate attribute is.

推荐答案

jQuery UI进度条没有明确设置的颜色;相反，它从您的UI主题继承小部件标题背景图像。那么，更改颜色的最简单方法是设置覆盖背景的样式。例如：

The jQuery UI progress bar doesn't have an explicitly set color; instead, it inherits the "widget header" background image from your UI theme. The simplest way to change the color, then, is to set up styles which override the background. For example:

.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }

（或者，您可以使用不同的背景图像。）然后，您只需更改设置其值时的进度条：

(Alternatively, you could use different background images.) Then, you simply change the class on the progress bar when setting its value:

function updateProgressbar(current, target) {
    var value = parseInt(current / target * 100);

    $progressbar
        .progressbar("value", value)
        .removeClass("beginning middle end")
        .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}

工作示例。

这篇关于动态更改jQuery Progress Bar的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！