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

发布于 2024-08-31 03:52:53 字数 134 浏览 3 评论 0原文

我想使用 jquery ui 进度条来显示每日总数的百分比。就我而言，您实际上可以查看分配的总数。（因为我显示的是完成一定距离的 pct，并且您实际上可以超出所需的距离。此工具是否支持大于 100% 的值，或者是否有其他 gui 工具可以执行此类操作？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故人如初 2024-09-07 03:52:54

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

鉴于您的情况有所需的实际距离，我建议使用格式化文本框代替进度栏。

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

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

回复收藏 0 原文

江南月 2024-09-07 03:52:53

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

然后您将获得不错的效果。

回复收藏 0 原文

魂ガ小子 2024-09-07 03:52:53

根据所涉及的数字，将比例更改为非线性，例如对数，怎么样？然后，您最终会得到一个根据值的大小以不同速度移动的条...如果您将 100% 定义为条的 2/3，您可以看到溢出，但仍然在范围内进度条。如果超过了进度条的尺寸，那么就会导致 UI 的设计和维护变得困难......

回复收藏 0 原文

_畞蕅 2024-09-07 03:52:53

就我个人而言，我会自己推出...这个完全基于 CSS，我只使用 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;
}

Personally, I would just roll my own... this one is entirely CSS based and I am only using the jQuery UI slider for the demo.

HTML (Note: classes added to match jquery ui classes, but there is no ui-progressbar-text class, that I know of).

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

回复收藏 0 原文

双马尾 2024-09-07 03:52:53

我还没有对此进行测试，但栏本身有自己的类，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%，所以我认为这可行。

I haven't tested this, but the bar itself has its own class, ui-progressbar-value. So if you put the progress bar into a div myDiv you could probably set the width manually like this:

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

or if you wanted to animate it:

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

In the example here: http://jqueryui.com/demos/progressbar/#theming, the width is at 37%, so I think that would work.

回复收藏 0 原文

宣告ˉ结束 2024-09-07 03:52:53

可能有某种方法可以做到这一点，但你必须修改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>

There is probably some way to do this, but you would have to modify jquery, which is something I wouldn't recommend. Instead, I would recommend trying to "fake" a similar result. One option would be - as SLC mentioned - to simply put two progressbars next to each other.

However, I think I would go with an overlay instead. For example, first you have a progressbar with a white background and a green bar, but to display 120%, you just use a progressbar with a green background and a red bar at 20%. Perhaps a code example will be clearer:

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

回复收藏 0 原文

黑寡妇 2024-09-07 03:52:53

当前进度条的 jQuery 实现不允许使用 0 到 100 范围之外的值。我一直在为所述插件开发替代实现，可以在 http://github.com/azatoth/jquery-ui/tree/progressbar 但我还没有实现任何可视化功能范围超出 100%，但这是一个好主意，我可能会实现一个选项来显示不同的范围。此时，任何输入范围都会重新计算为在 100% 范围内。

回复收藏 0 原文

~没有更多了~