jQuery UI：如何制作多色 ProgressBar？不同颜色的段答案

【问题标题】：jQuery UI: How to make a multi colored ProgressBar? Segments colored differentlyjQuery UI：如何制作多色 ProgressBar？不同颜色的段
【发布时间】：2014-07-28 04:55:09
【问题描述】：

<script type="text/javascript">
        $(function() {
                $("#progressbar").progressbar({
                        value: 35
                });
        });
        </script>
<div id="progressbar">  </div>

代码取自：jQuery UI: How to change the color of a ProgressBar?

为了让问题更清楚：我希望进度条有段，它们应该是 0% - 59% 的绿色，60% - 89% 的黄色和 90% - %100% 的红色。

【问题讨论】：

jQuery UI: How to change the color of a ProgressBar?的可能重复
不，我不希望整个进度条的颜色相同。我正在尝试让进度条的各个部分具有不同的颜色。
你试过我的答案吗

标签： javascript jquery html

【解决方案1】：

您可以使用 jquery.ui.multiprogressbar.js 做到这一点。

为了给进度条设置不同的颜色，创建一组我在演示中使用的类并将其设置为 barClass

Demo

    $('#plain').multiprogressbar({
       parts: [
        {value: 59,barClass: "green"},
       {value: 30,barClass: "yellow"},
       {value: 11,barClass: "red"}]
});

【讨论】：