Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Модуль UI Progressbar — индикатор хода процесса
Модуль UI Progressbar позволяет создать индикатор хода процесса. Индикатор представляет прямоугольную область, внутри которой расположена полоса другого цвета. Ширина полосы зависит от какого-либо значения. Если значение равно нулю, то полоса не показывается, при значении 50 полоса будет начинаться от левого края области и продлится до середины, а если значение равно 100, то полоса будет занимать всю прямоугольную область.
Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Progressbar, 1.7.2, выбираем тему из списка (например, Sunny), а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:
- jquery-ui-1.7.2.custom.css и каталог images (папка css\sunny);
- jquery-1.3.2.min.js (папка js);
- jquery-ui-1.7.2.custom.min.js (папка js).
Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера выведем индикатор хода процесса со значением 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.
Рис. 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>]]) {
// ...
}Для управления созданным индикатором предназначены три метода:
disable— временно запрещает использование индикатора;enable— разрешает использование индикатора, если ранее оно было запрещено с помощью методаdisable;destroy— удаляет компонент и возвращает все элементы в первоначальное состояние.
Пример управления индикатором и обработки событий приведен в листинге 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>
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов