动态更改 jQuery 进度条的颜色

Dynamically change the color of jQuery Progress Bar

本文关键字：颜色 jQuery 动态      更新时间：2023-09-26

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

jQuery UI 进度条没有显式设置的颜色;相反，它从 UI 主题继承"widget header"背景图像。 因此，更改颜色的最简单方法是设置覆盖背景的样式。 例如：

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

工作示例。

相关文章：