Jquery ui 如何显示大于100%的进度条_Jquery Ui_Progress Bar

Jquery ui 如何显示大于100%的进度条

jquery-ui

Jquery ui 如何显示大于100%的进度条,jquery-ui,progress-bar,Jquery Ui,Progress Bar,我想使用jQueryUI进度条来显示每日总计的pct。在我的例子中，你实际上可以检查分配的总数。（正如我所展示的pct complete（完成一定距离）一样，您实际上可以超过所需的距离。此工具是否支持大于100%的值，或者是否有其他gui工具来完成此类操作？您最好将两个进度条并排放置，将第一个进度条涂成绿色，将第二个进度条涂成红色d、左侧进度条为0-100%，红色进度条为100% 你会得到一个很好的效果。我还没有测试过这个，但是这个进度条本身有自己的类，ui progressbar value

我想使用jQueryUI进度条来显示每日总计的pct。在我的例子中，你实际上可以检查分配的总数。（正如我所展示的pct complete（完成一定距离）一样，您实际上可以超过所需的距离。此工具是否支持大于100%的值，或者是否有其他gui工具来完成此类操作？

您最好将两个进度条并排放置，将第一个进度条涂成绿色，将第二个进度条涂成红色d、左侧进度条为0-100%，红色进度条为100%

你会得到一个很好的效果。

我还没有测试过这个，但是这个进度条本身有自己的类，

ui progressbar value

。因此，如果你把进度条放到一个div

myDiv

中，你可能可以像这样手动设置宽度：

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

或者，如果您想为其设置动画：

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

在这里的示例中：，宽度为37%，所以我认为这会起作用。

当前progressbar的jQuery实现不允许0到100范围之外的值。我一直在为上述插件开发替代实现，可以在中找到，但我还没有实现任何可视化范围的功能在100%之外，但这是一个好主意，我可能会实现一个显示不同范围的选项。此时，任何输入范围都会重新计算为在100%范围之内。

根据所涉及的数字，如何将比例更改为非线性，并使其成为例如对数？然后您会得到一个以不同角度移动的条速度取决于值的大小…如果将100%定义为进度条的2/3，则可以看到超限，但仍在进度条的范围内。如果超出进度条的尺寸，则会使UI难以设计和维护…

可能有某种方法可以做到这一点，但您必须这样做修改jquery，这是我不推荐的。相反，我建议尝试“伪造”类似的结果。一个选项是——正如SLC所提到的——简单地将两个ProgressBar放在一起

但是，我想我会选择覆盖。例如，首先，您有一个带有白色背景和绿色条的进度条，但要显示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>


var=40；
$（文档）.ready（函数（）{
$（“#progressbar”）.progressbar（{value:val}）；
$（“#plusTen”）.bind（“单击”，函数（）
{
设置值（$（“#进度条”），val+10；
val+=10；
});
$（“#减十”）.bind（“单击”，函数（）
{
设定值（$（“#进度条”），val-10；
val-=10；
});
});
函数设置值（条形图，值）
{
如果（值>100）
{
数值-=100；
bar.removeClass（“低于最大值”）；
bar.addClass（“高于最大值”）；
}
其他的
{
bar.removeClass（“高于Max”）；
bar.addClass（“低于最大值”）；
}
进度条（“期权”、“价值”、“价值”）；
}
#progressbar.Overmax.ui-progressbar
{
背景图像：无；
背景色：#00FF00；
}
#progressbar.Overmax.ui progressbar值
{
背景图像：无；
背景色：#FF0000；
}
#progressbar.belowMax.ui-progressbar
{
背景图像：无；
背景色：#FFFFFF；
}
#progressbar.belowMax.ui progressbar值
{
背景图像：无；
背景色：#00FF00；
}

就我个人而言，我只想推出我自己的……这一款完全基于CSS，我只使用jQueryUI滑块

HTML（注意：添加的类与jQueryUI类相匹配，但据我所知，没有

UIProgressBar文本

class）

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

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

这里有两个例子：
实际距离：3.4/4.5
实际距离：4.7/4.5

你可以播放彩色或添加图标来指示你是否超过了要求的距离。

这些图标指向11。如果你烧录一张空间过大的CD，声音会大一点，不是吗？就像尼禄一样。啊，我也这么想，只是我会把第二张放在第一张的上面，所以它会重叠。另外，如果你让底部的一张看起来像火和另一张一样n最上面的一个看起来像一串带刺的铁丝网，那真是太糟糕了。这120%是它的父级大小的120%，而不是它自己当前的大小，所以在调整它的大小时，这样可能会起作用（我不知道），您的确切示例将调整为一个不相关的大小。@Jasper我很确定小部件应该是这样工作的。.ui progressbar值在.ui progressbar中，因此它应该可以完美地工作。如果我的回答中没有明确说明，请原谅。myDiv位只是为了让您可以选择正确的progressbar。我现在明白了，您是完全正确的，并且我我错了，对不起，伙计，你是个天才。我怎么能给+10呢？为了节省空间，我对你的小提琴做了一些修改

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

.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;
}