Как бы вы показали индикатор выполнения более 100%

Я хочу использовать индикатор jquery ui progress, чтобы показать pct ежедневной суммы. В моем случае вы можете фактически перечислить общее выделенное. (так как я показываю pct на определенном расстоянии, и вы могли бы пройти выше требуемого расстояния. Поддерживает ли этот инструмент значение более 100% или есть ли какие-либо другие инструменты gui для такого рода вещей?

Ответ 1

В зависимости от числа, связанного с изменением масштаба, чтобы не быть линейным, и, например, сделать его логарифмическим? Затем Yout заканчивается баром, который перемещается с разной скоростью в зависимости от размера значения... Если вы определяете, что равно 100%, как 2/3rds на панели, вы можете увидеть переполнение, но все равно находиться в пределах индикатор. Если вы превысите размеры индикатора выполнения, тогда это затрудняет проектирование и обслуживание пользовательского интерфейса.

Ответ 2

Вам может быть лучше размещать две полосы хода рядом друг с другом, окрасить первый зеленый, а второй - красный, а левый индикатор выполнения - 0-100%, а красный - 100% независимо от%

Тогда вы получите хороший эффект.

Ответ 3

Лично я бы просто спустил свой собственный... этот полностью основан на CSS, и я использую только слайдер UI jQuery для демо.

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

Ответ 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%, поэтому я думаю, что это сработает.

Ответ 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>

Ответ 6

Текущая реализация jQuery progressbar не позволяет значения за пределами диапазона, лежащего в диапазоне от 0 до 100. Я работал над заменой для упомянутого плагина, который можно найти на http://github.com/azatoth/jquery-ui/tree/progressbar, но я еще не реализовал никаких функциональных возможностей для визуализации диапазонов вне 100%, но это хорошая идея, и я мог бы реализовать опцию для отображения разных диапазонов. в настоящий момент любой диапазон ввода пересчитывается в пределах 100%.

Ответ 7

Индикатор выполнения - хорошая идея, когда вы можете предсказать, когда задача закончится.
Например, загрузка файла с использованием байтов.

Учитывая, что ваш случай имеет требуемое и фактическое расстояние, я рекомендую использовать форматированное текстовое поле вместо вашего индикатора выполнения.

Вот два примера:
Фактическое расстояние: 3,4 из 4,5
Фактическое расстояние: 4.7 из 4.5

Вы можете играть с цветом или добавлять значки, чтобы указать, когда вы превысите требуемое расстояние.