как Вы показали бы индикатор выполнения, больше, чем 100%
я хочу использовать jQuery ui индикатор выполнения для показа процента ежедневного общего количества. В моем случае можно на самом деле пробежаться через выделенное общее количество. (поскольку я показываю процент, завершенный из определенного расстояния, и Вы могли на самом деле выйти за предел необходимого расстояния. Этот инструмент поддерживает наличие значения больших, чем 100% или является там какими-либо другими gui инструментами, чтобы сделать этот вид вещи?
7 ответов
В зависимости от числа, что если изменить шкалу, чтобы она не была линейной, и сделать ее, например, логарифмической? Тогда получится полоса, которая движется с разной скоростью в зависимости от величины значения... Если вы определите 100% как 2/3 полосы, вы можете увидеть превышение, но все еще останетесь в пределах полосы прогресса. Если вы превысите размеры индикатора прогресса, то это затруднит разработку и поддержку пользовательского интерфейса.....
Возможно, вам лучше расположить два индикатора выполнения рядом, цвет первого зеленый, а второй красный, а левый индикатор выполнения - 0- 100%, а красный 100%
Тогда вы получите хороший эффект.
Текущая реализация индикатора выполнения в jQuery не допускает значений за пределами диапазона от 0 до 100. Я работал над реализацией замены для указанного плагина, которую можно найти по адресу http: // github. com / azatoth / jquery-ui / tree / progressbar , но я еще не реализовал какие-либо функции для визуализации диапазонов за пределами 100%, но это хорошая идея, и я мог бы реализовать опцию для отображения разных диапазонов. в настоящий момент любой входной диапазон пересчитывается так, чтобы он находился в пределах 100% диапазона.
Вероятно, есть способ сделать это, но вам придется изменить 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>
Индикатор выполнения - хорошая идея, когда вы можете предсказать, когда задача закончится.
Например, загрузка файла с использованием байтов.
Учитывая, что в вашем случае указана необходимая и фактическая дистанция, я рекомендую использовать отформатированное текстовое поле вместо индикатора выполнения.
Вот два примера:
Фактическое расстояние: 3,4 из 4,5
Фактическое расстояние: 4,7 из 4,5
Вы можете поиграть с цветом или добавить значки, чтобы указать, когда вы превысите требуемое расстояние.
Лично я бы просто сделал свой собственный... этот полностью основан на 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;
}
Я не тестировал это, но сама полоса имеет свой собственный класс, 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%, поэтому я думаю, что это сработает.