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

Question

我正在考虑使用 Jquery 进度条来显示用户在类(class)中取得的进度。

• 在进度条中，我想显示文本 Course Progress 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>

但我不知道如何更改颜色。它不必动态更改 - 只有一种颜色不是灰色 :)

谢谢

Answer 1

假设您使用的是 jQueryUI，进度条的背景由 CSS 属性控制 - 它是一个纯色图像。

样式属性是 .ui-widget-header，因此您需要为此更改背景图像。在你的文档的头部，(或者如果你不能访问头部，那么 body 就可以)如果你想要一个漂亮的背景图像，请放置以下内容:

<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 中缺少结束标记。