jQuery UI：如何制作多色ProgressBar？细分的颜色不同

Question

<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％。

Answer 1

您可以使用jquery.ui.multiprogressbar.js。

执行此操作

为了设置不同颜色的进度条创建我在demo中使用的类集并将其设置为barClass

Demo

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