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

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


progress-bar jquery-ui
person leora    schedule 01.05.2010    source источник
comment
они идут к 11. это один громче, не так ли?   -  person Sky Sanders    schedule 01.05.2010

Ответы (7)


arrow_upward
13
arrow_downward

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

person JohnnyJP    schedule 02.06.2010

arrow_upward
45
arrow_downward

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

Тогда получится приятный эффект.

person NibblyPig    schedule 01.05.2010
comment
То же, что и Nero, когда вы записываете компакт-диск, на котором выделено слишком много места. - person labilbe; 29.05.2010
comment
Ах, я думал то же самое, за исключением того, что я бы поставил второй поверх первого, так что он перекрывается. Кроме того, если вы сделаете нижний похожим на огонь, а затем верхний - на нить колючей проволоки, это будет очень плохо. - person ; 04.06.2010

arrow_upward
2
arrow_downward

Лично я бы просто сделал свой собственный ... этот полностью основан на 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;
}
person Mottie    schedule 04.06.2010
comment
Ой, ты гений. Как я могу поставить +10? Я немного изменил вашу скрипку, чтобы сэкономить место jsfiddle.net/Z6k3C/86 - person Fr0zenFyr; 21.11.2013

arrow_upward
1
arrow_downward

Я не тестировал это, но сам стержень имеет свой собственный класс 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%, поэтому я думаю, что это сработает.

person colinmarc    schedule 29.05.2010
comment
это 120% составляет 120% от его родительского размера, а не от его собственного текущего размера, поэтому при изменении его размера может работать (я не знаю), ваш точный образец изменится до несвязанного размера. - person Jasper; 03.06.2010
comment
@Jasper Я почти уверен, что виджет должен работать именно так. .ui-progressbar-value находится внутри .ui-progressbar, поэтому он должен работать безупречно. Извините, если это было непонятно в моем ответе. Бит myDiv предназначен только для того, чтобы вы могли выбрать правильный индикатор выполнения. - person colinmarc; 03.06.2010
comment
Теперь я вижу, вы абсолютно правы, а я просто ошибался, извините - person Jasper; 04.06.2010

arrow_upward
1
arrow_downward

Вероятно, есть какой-то способ сделать это, но вам придется изменить 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>
person Jasper    schedule 03.06.2010

arrow_upward
0
arrow_downward

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

person azatoth    schedule 29.05.2010

arrow_upward
0
arrow_downward

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

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

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

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

person Zamboni    schedule 05.06.2010