4

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

  • 在进度条内，我想显示文本 Course Progress 70%
  • 我想更改进度条的默认灰色

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

$（函数（）{
    $( "#progressbar" ).progressbar({
        价值：70
    });
);


<div 样式="宽度:600px;" id="进度条">
    <div style="float:left;color:black;text-align:center;width:100%;padding-top:3px;">课程进度
</div>

但我不知道如何改变颜色。它不必动态更改 - 只需一种非灰色的颜色 :)

谢谢

4

2 回答 2

7

假设您使用的是 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 上缺少结束标记。

于 2012-05-26T12:24:02.663 回答
3

Hiya工作演示很简单，可以满足您的需要 :) http://jsfiddle.net/Y9c3R/1/

在这里阅读：http : //docs.jquery.com/UI/Progressbar

非常详细的驻留在此处：http: //jsfiddle.net/ZQrnC/ =动态更改 jQuery 进度条的颜色

如果您想进一步阅读：jQuery UI：如何更改 ProgressBar 的颜色？

jQuery代码

var $progressbar = $("#progressbar").progressbar({ value: 70 }).addClass("beginning");

css

.ui-progressbar.beginning .ui-progressbar-value { background: red; }
于 2012-05-26T12:35:44.843 回答