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属性控制 - 它是一个可靠的图像。

样式属性为.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上缺少结束标记。

Answer 2

Hiya 工作演示简单满足您的需求:) http://jsfiddle.net/Y9c3R/1/

好好阅读：http://docs.jquery.com/UI/Progressbar

这里有很多精心设计的人：http://jsfiddle.net/ZQrnC/ = Dynamically change the color of jQuery Progress Bar

如果您想进一步阅读：jQuery UI: How to change the color of a ProgressBar?

jquery代码

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

<强> CSS

.ui-progressbar.beginning .ui-progressbar-value { background: red; }

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

2 个答案: