Модуль UI Progressbar — индикатор хода процесса

Модуль UI Progressbar позволяет создать индикатор хода процесса. Индикатор представляет прямоугольную область, внутри которой расположена полоса другого цвета. Ширина полосы зависит от какого-либо значения. Если значение равно нулю, то полоса не показывается, при значении 50 полоса будет начинаться от левого края области и продлится до середины, а если значение равно 100, то полоса будет занимать всю прямоугольную область.

Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Progressbar, 1.7.2, выбираем тему из списка (например, Sunny), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем индикатор хода процесса со значением 60% (листинг 12.27).

Листинг 12.27. Модуль UI Progressbar, вывод индикатора хода процесса

<!doctype html>
<html>
<head>
<title>Модуль UI Progressbar, индикатор хода процесса</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/sunny/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#progressbar").progressbar({
      value: 60
   });
});
</script>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>
</body>
</html>

Результат выполнения листинга показан на рис. 12.12.

pic12_12.png

Рис. 12.12. Индикатор хода выполнения процесса со значением 60%

Как видно из примера, шаблоном для индикатора является элемент DIV.

<div id="progressbar"></div>

Для создания индикатора хода процесса и управления им предназначен метод progressbar(). Формат метода:

progressbar([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Модуль UI Progressbar предоставляет только одно свойство value, которое задает процент выполнения процесса. По умолчанию свойство имеет значение 0.

$("#progressbar").progressbar({ value: 20 });

Чтобы изменить или получить значения опций уже после создания индикатора, необходимо использовать второй формат метода progressbar(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#progressbar").progressbar("option", "value", 10);

Если необходимо получить значение опции, то третий параметр указывать не нужно. Получим текущее значение опции value.

alert($("#progressbar").progressbar("option", "value"));

Установить новое значение можно также с помощью метода value.

$("#progressbar").progressbar("value", 20);

Обработать события, происходящие с индикатором хода процесса, можно двумя способами.

progressbar({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> может быть указано событие change (progressbarchange для метода bind()), которое возникает при изменении значения опции value. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Для управления созданным индикатором предназначены три метода:

Пример управления индикатором и обработки событий приведен в листинге 12.28.

Листинг 12.28. Модуль UI Progressbar, события и методы

<!doctype html>
<html>
<head>
<title>Модуль UI Progressbar, события и методы</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet"
      href="css/sunny/jquery-ui-1.7.2.custom.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
   $("#progressbar").progressbar({
      value: 60,
      change: function() {
         $("#div1").append("Событие change<br>");
      }
   }).bind("progressbarchange", function() {
      $("#div1").append("Событие progressbarchange<br>");
   });
   $("#btn1").click(function() {
      var val = parseInt($("#txt1").val());
      if (!isNaN(val)) {
         $("#progressbar").progressbar("option", "value", val);
         //$("#progressbar").progressbar("value", val);
      }
      else alert("Необходимо ввести число");
   });
   $("#btn2").click(function() {
      alert($("#progressbar").progressbar("option", "value"));
   });
   $("#btn3").click(function() {
      $("#progressbar").progressbar("disable");
   });
   $("#btn4").click(function() {
      $("#progressbar").progressbar("enable");
   });
});
</script>
<style>
   /* Выводим анимированную картинку вместо полосы */
   .ui-progressbar-value { background-image:url(animate.gif); }
</style>
</head>
<body style="font-size:8pt; font-family:Verdana">
<div style="width: 500px;"><div id="progressbar"></div></div>
<br><br>
Введите новое значение: <input type="text" id="txt1"><br><br>
<input type="button" value="Изменить значение" id="btn1">
<input type="button" value="Получить значение" id="btn2"><br><br>
<input type="button" value="Запретить" id="btn3">
<input type="button" value="Разрешить" id="btn4"><br><br>
<div id="div1"></div>
</body>
</html>
Предыдущая статья Все статьи Следующая статья