动态更改jQuery Progress Bar的颜色

Question

我有一个动态的JQuery进度条我想要主题(这里是文档):它将以红色开始,然后随着它的进展变为黄色,最后变为绿色.看起来这只是设置样式颜色属性的问题,但我似乎无法找到适当的属性.

Answer 1

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

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

(或者,您可以使用不同的背景图像.)然后,您只需在设置其值时更改进度条上的类:

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");
}

工作实例.