JQuery进度条 – 添加文本和更改背景颜色

我正在考虑使用 Jquery进度条来显示用户在课程中取得的进展.

>在进度条中,我想显示课程进度70％
>我想更改进度条的默认灰色

这是我到目前为止所做的 – 这让我可以在进度条的中心添加文本：

$(function() {
    $( "#progressbar" ).progressbar({
        value: 70
    });
);


<div style="width:600px;" id="progressbar">
    <div style="float:left;color:black;text-align:center;width:100%;padding-top:3px;">Course Progress
</div>

但我无法弄清楚如何改变颜色.它不必动态改变 – 只有一种不是灰色的颜色:)

谢谢

解决方法

假设你正在使用jQueryUI,进度条的背景由CSS属性控制 – 它是一个可靠的图像.

style属性是.ui-widget-header,因此您需要更改背景图像.在您的文档的头部,(或者如果您无法访问头部,那么正文将会这样做)如果您想要一个精美的背景图像,请输入以下内容：

<style type='text/css'>
    .ui-widget-header {
        background-image: url('link-to-a-new-gradient-bar-here.png') !important;
    }
</style>

或者,对于简单的单色背景：

<style type='text/css'>
    .ui-widget-header {
        background-image: none !important;
        background-color: #FF0000 !important; //Any colour can go here
    }
</style>

！important是确保新样式覆盖现有CSS所必需的.

此外,您在进度条HTML上缺少结束标记.