我有一个 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");
}
$('#progressbar > div').css('background','red');
而不是$('#progressbar').css('color','red');
。感谢您的帮助;没有您,我无法找到答案! - kerkeslager