Question

我想使用jquery ui进度条显示每日总数的pct。在我的情况下，你实际上可以超过分配的总数。（因为我显示某个距离完成了pct，你实际上可以超过所需的距离。这个工具是否支持大于100％的值，或者还有其他gui工具来做这类事情？

Answer 1

你可能最好并排放置两个进度条，将第一个颜色设置为绿色，将第二个颜色设置为红色，并将左侧进度条设置为0-100％，将红色设置为100-任何％

然后你会得到很好的效果。

Answer 2

根据所涉及的数量，如何将比例变为不是线性的，并使其成为例如logarythmic？ Yout然后最终得到一个根据值的大小以不同的速度移动的条...如果您定义100％作为条的2 / 3rds你可以看到超限，但仍然在范围内进度条。如果超出进度条的尺寸，则会使UI难以设计和维护....

Answer 3

就个人而言，我只想推出自己的...这个完全基于CSS，我只使用the demo的jQuery UI滑块。

HTML（注意：添加的类匹配jquery ui类，但我知道没有ui-progressbar-text类。）

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
 <div class="ui-progressbar-value ui-widget-header ui-corner-left">
  <span class="ui-progressbar-text">10%</span>
 </div>
</div>

CSS

.ui-progressbar {
 height: 20px;
 width: 50%;
 border: silver 4px solid;
 margin: 0;
 padding: 0;
}
.ui-progressbar-value {
 height: 20px;
 margin: 0;
 padding: 0;
 text-align: right;
 background: #080;
 width: 10%;
}
.ui-progressbar-text {
 position: relative;
 top: -3px;
 left: 0;
 padding: 0 5px;
 font-size: 14px;
 font-weight: bold;
 color: #000;
}

Answer 4

我没有测试过这个，但是栏本身有自己的类ui-progressbar-value。因此，如果您将进度条放入div myDiv，您可以手动设置宽度，如下所示：

$('#myDiv .ui-progressbar-value').width('120%')

或者如果你想为它制作动画：

$('#myDiv .ui-progressbar-value').animate({width:'120%'}, 'fast')

在此示例中：http://jqueryui.com/demos/progressbar/#theming，宽度为37％，所以我认为这样可行。

Answer 5

可能有一些方法可以做到这一点，但你必须修改jquery，这是我不推荐的。相反，我建议尝试“伪造”类似的结果。一个选项是 - 正如SLC所提到的 - 简单地将两个进度条彼此相邻。

但是，我想我会选择叠加。例如，首先您有一个带有白色背景和绿色条的进度条，但要显示120％，您只需使用绿色背景的进度条和20％的红色条。也许代码示例会更清晰：

<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
    var val = 40;

    $(document).ready(function() {
      $("#progressbar").progressbar({ value: val });
      $("#plusTen").bind("click", function ()
      {
        setValue($( "#progressbar" ), val + 10 );
        val += 10;
      });

      $("#minusTen").bind("click", function ()
      {
        setValue($( "#progressbar" ), val - 10 );
        val -= 10;
      });
    });

    function setValue(bar, value)
    {
      if (value > 100)
      {
        value -= 100;
        bar.removeClass("belowMax");
        bar.addClass("aboveMax");
      }
      else
      {
        bar.removeClass("aboveMax");
        bar.addClass("belowMax");
      }

      bar.progressbar( "option", "value", value);
    }

  </script>

  <style type='text/css'>
    #progressbar.aboveMax.ui-progressbar
    {
      background-image: none;
      background-color: #00FF00;
    }

    #progressbar.aboveMax .ui-progressbar-value
    {
      background-image: none;
      background-color: #FF0000;
    }

    #progressbar.belowMax.ui-progressbar
    {
      background-image: none;
      background-color: #FFFFFF;
    }

    #progressbar.belowMax .ui-progressbar-value
    {
      background-image: none;
      background-color: #00FF00;
    }
  </style>

</head>
<body style="font-size:62.5%;">

  <div id='progressbar' class='belowMax'></div>
  <br />
  <input type='button' value='+10' id='plusTen' />
  <input type='button' value='-10' id='minusTen' />

</body>
</html>

Answer 6

进度条的当前jQuery实现不允许超出0到100范围的值。我一直在研究所述插件的替换实现，可以在http://github.com/azatoth/jquery-ui/tree/progressbar找到但我已经尚未实现任何可视化100％以外范围的功能，但这是一个不错的主意，我可能会实现一个显示不同范围的选项。此时任何输入范围都会重新计算到100％范围内。

Answer 7

当您可以预测任务何时结束时，进度条是个好主意例如，使用字节下载文件。

鉴于您的案例有必要距离和实际距离，我建议您使用格式化文本框代替进度条。

以下是两个例子：
实际距离：3.4 of 4.5
实际距离：4.7 of 4.5

您可以使用颜色进行游戏或添加图标以指示何时超出所需距离。

你会如何显示大于100％的进度条

7 个答案: