Виджет Progress Bar
75Веб-программирование --- jQuery UI --- Виджет Progress Bar
Теперь, когда вы получили общее представление о виджетах jQuery UI на примере виджета Button, мы можем приступить к рассмотрению остальных виджетов, начав с виджета Progress Bar — индикатора процесса.
С помощью индикатора процесса можно информировать пользователя о достигнутом прогрессе в ходе выполнения какой-либо задачи. Этот индикатор используется лишь в случае детерминированных задач, т.е. задач, масштаб которых известен, и можно точно определить процентную долю выполненного объема работы. Другую категорию составляют недетерминированные задачи. Ход выполнения таких задач с трудом поддается количественной оценке, так что в этом случае необходимо лишь сообщить пользователю, что до завершения задачи придется немного подождать.
Отображение полезной информации о ходе выполнения задач
Никаких жестких правил относительно того, каким образом виджеты должны использоваться в веб-приложениях, не существует. В то же время в пользовательской среде, мнение которой формируется под влиянием стандартов, устанавливаемых такими операционными системами, как Windows или Mac OS, уже сложились определенные представления о том, каким должно быть поведение тех или иных элементов управления, и в частности индикатора процесса. Чтобы использование индикатора процесса приносило действительную пользу, придерживайтесь следующих правил:
Во-первых, изменяйте значение индикатора лишь в сторону увеличения. Не пытайтесь уменьшать его, если оказывается, что для завершения задачи требуется выполнить большее число действий, чем первоначально предполагалось. Индикатор процесса должен отражать степень выполнения задачи, а не оценку времени, оставшегося до ее завершения. Если существует несколько возможных путей развития вычислительного процесса, то значение индикатора должно базироваться на наиболее пессимистическом варианте развития событий. Лучше впоследствии отобразить существенный скачок значения, чем заставлять пользователя теряться в догадках относительно реального состояния дел.
Во-вторых, ни в коем случае не допускайте хождения индикатора процесса по кругу. Если у вас имеется недостаточно информации для того, чтобы отобразить разумную оценку степени выполнения задачи, используйте индикатор процесса, предназначенный для недетерминированных задач. Если значение индикатора приближается к отметке 100%, то пользователь настраивается на то, что процесс вот-вот закончится. Если же индикатор внезапно возвращается в начало шкалы, то это просто-напросто сбивает пользователя с толку и делает применение индикатора процесса бессмысленным.
Создание виджета Progress Bar
Чтобы создать индикатор процесса, следует выбрать элемент div и вызвать метод progressbar(), как показано в примере ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('#progressDiv').progressbar({
value: 21
});
});
</script>
</head>
<body>
<div id="progressDiv"></div>
</body>
</html>В этом примере документ содержит элемент div с идентификатором progressDiv. Для создания индикатора процесса следует использовать пустой элемент div. Наличие любого содержимого влияет на расположение виджета на странице. В сценарии мы выбираем элемент progresDiv и вызываем метод progressbar(), передавая ему объект отображения с настройками начальной конфигурации индикатора. Виджет Progress Bar поддерживает два настраиваемых свойства, которые описаны в таблице ниже:
| Свойство | Описание |
|---|---|
| disabled | Значение true соответствует отключенному индикатору процесса. Значение по умолчанию — false |
| value | Устанавливает процент выполнения задачи, отображаемый для пользователя. Значение по умолчанию — 0 |
В данном примере начальное значение индикатора установлено равным 21%. Результат представлен на рисунке:
Использование методов виджета Progress Bar
Для виджета Progress Bar определен ряд методов, для которых используется та же форма вызова, что и для методов виджета Button. Иными словами, вы вызываете метод progressbar() и в качестве первого аргумента указываете требуемый метод. Доступные методы представлены в таблице ниже:
| Метод | Описание |
|---|---|
| progressbar("destroy") | Возвращает элемент div в исходное состояние, полностью удаляя из него функциональность виджета |
| progressbar("disable") | Отключает индикатор процесса |
| progressbar("enable") | Включает индикатор процесса |
| progressbar("option") | Устанавливает одно или несколько значений свойств |
| progressbar("value", value) | Получает или устанавливает значение, отображаемое индикатором процесса |
Большинство этих методов работает аналогично одноименным методам виджета Button, поэтому я не буду терять время на пояснение их примерами. Исключение составляет метод value, который позволяет получать или устанавливать значение, отображаемое индикатором процесса. Соответствующий пример приведен ниже:
$(function() {
$('#progressDiv').progressbar({
value: 21
});
// Добавить две кнопки
$('#progressDiv').after(
$('<button>Уменьшить</button><button>Увеличить</button>'));
$('button').css({"margin":"10px", "padding":"10px"})
.click(function(e) {
var divElem = $('#progressDiv');
var current = divElem.progressbar("value");
// Уменьшить или увеличить значение на шкале,
// в зависимости от того на какой кнопке щелкнули
divElem.progressbar("value",
$(this).text() == "Уменьшить" ? current - 10 : current + 10);
});
});В этом примере добавлена пара элементов button, которые используются для уменьшения или увеличения значения, отображаемого индикатором процесса. Каждое нажатие кнопки увеличивает значение на 10%. Результат представлен на рисунке:
Метод value всегда возвращает значение, лежащее в интервале от 0 до 100, даже если вы установите значение, выходящее за эти пределы в ту или иную сторону. Это означает, что проверку указываемых вами значений можно возложить на индикатор, а не заниматься этим самому.
Анимация индикатора процесса
Несмотря на то что внешний вид индикатора процесса согласуется с используемой темой оформления jQuery UI, он выглядит совсем просто. При создании этого индикатора jQuery UI добавляет в документ элемент div, а также определяет ряд новых классов как в новом элементе div, так и в том, для которого вызывался метод progressbar(). Сгенерированная HTML-разметка выглядит примерно следующим образом:
<div id="progressDiv" class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="21">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 21%;"></div>
</div>
Класс ui-progressbar-value воздействует на элемент, который jQuery UI добавляет для отображения значения индикатора, а класс ui-progressbar — на внешний элемент div, от которого мы отталкивались. Эти классы можно привлечь для создания индикатора процесса, в котором используется анимированное GIF-изображение, как показано в примере ниже:
<!DOCTYPE html>
...
<style type="text/css">
.ui-progressbar-value {
background-image: url(http://www.professorweb.ru/downloads/jquery/progress-animation.gif);
}
.ui-progressbar {
height: 22px
}
</style>
...Для указания изображения, которое будет использоваться внутренним элементом div, можно воспользоваться CSS-свойством background-image. В данном случае указано изображение progress-animation.gif, которое представляет собой простое анимированное GIF-изображение, взятое на сайте jQuery UI:
По поводу использования изображений, подобных этому, можно сделать два замечания. Во-первых, ответственность за то, чтобы выбранное изображение согласовывалось с остальной частью темы, лежит на вас.
Во-вторых, необходимо следить за высотой изображения. По умолчанию высота индикатора процесса jQuery UI составляет 2em, что может породить проблемы в случае меньших изображений. Чтобы эти трудности не возникали, установите для свойства height элементов класса ui-progressbar значение, совпадающее с высотой изображения, которое используется. В данном примере высота изображения составляет 22 пикселя. Если не предпринять никаких мер по регулированию высоты, то границы шкалы индикатора либо окажутся спрятанными за изображением, либо будут выступать за его пределы, как показано на рисунке:
Использование событий виджета Progress Bar
Для индикатора процесса jQuery UI определены три события, которые описаны в таблице ниже:
| Событие | Описание |
|---|---|
| create | Происходит при создании индикатора процесса |
| change | Происходит при изменении значения, отображаемого индикатором процесса |
| complete | Происходит, когда значение, отображаемое индикатором процесса, достигает отметки 100 |
Пример использования событий приведен ниже:
$(function() {
// Добавить текстовый индикатор
$('#progressDiv').after(
$('<p style="text-align:center">Ход процесса: <span id="progVal"></span>%</p>'));
$('#progressDiv').progressbar({
value: 0,
// Используем событие change
change: function(e) {
$('#progVal').text($('#progressDiv').progressbar("value"));
}
});
var i = 0;
function startProgress()
{
if (i > 100)
return;
else
$('#progressDiv').progressbar("value", i++);
setTimeout(startProgress, 50);
}
startProgress();
});
В этом примере добавлен элемент span, который используется для отображения процентного значения индикатора процесса. Результат представлен на рисунке:
Работая с событиями, следует помнить о двух вещах. Во-первых, событие complete срабатывает всякий раз, когда индикатор достигает отметки 100 или переходит ее. Это означает, что в случае многократной повторной установки значения индикатора равным, например, 100, событие может запускаться множество раз. Во-вторых, при значения индикатора, равном 100 и выше, запускаются два события — change и complete, поэтому нужно быть готовым обработать оба события, когда завершаете обновление индикатора процесса.
