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

Question

我正在考虑使用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>

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

谢谢

Answer 1

假设你正在使用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上缺少结束标记.