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

问题描述

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

代码取自：

为了使问题更清晰：我希望进度条有段，它们应该是绿色，从0％到59％，黄色从60％到89％，红色从90％ - ％100％ 。

To make the question clearer : I want the progress bar to have segments and they should be be green from 0% - 59%, yellow from 60% - 89%, and red from 90% - %100%.

推荐答案

您可以使用jquery.ui.multiprogressbar.js执行此操作。

You can do this with jquery.ui.multiprogressbar.js.

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

Inorder to set different color to progressbar create set of class as i used in demo and set it to barClass

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

这篇关于jQuery UI：如何制作多色ProgressBar？细分不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！