Progressbar
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Простое использование индикатора выполнения.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{padding:15px}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="progressbar"~gt~~lt~/div~gt~
~lt~script~gt~
$( "#progressbar" ).progressbar({value: 37});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~------------------------------------------~gt~
~lt~tit~gt~Использование анимации~lt~/tit~gt~
~lt~coment~gt~Чтобы организовать подобную анимацию, можно установить css-свойству background-image анимированную картинку (в нашем случае pbar-ani.gif (не входящую в состав jQuery UI - нужно подбирать самостоятельно)) для css-класса .ui-progressbar-value.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{padding:15px}
#progressbar{height:20px}
.ui-progressbar-value{background-image: url(/ui/images/pbar-ani.gif)}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="progressbar"~gt~~lt~/div~gt~
~lt~script~gt~
$( "#progressbar" ).progressbar({value: 37});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Описание
Свойства
Методы
События
Оформление
Плагин Progressbar позволяет превращать блочные элементы (обычно div'ы) в индикаторы выполнения, которые отображают прогресс выполнения какой-либо задачи. Естественно, связывать выполнение задачи с соответствующим отображением в прогрессбаре, веб программист должен самостоятельно.
Плагин рассчитан на использование в хорошо отлаженных системах. Это значит, что устанавливаемые значения будут находится строго в диапазоне от 0 до 100 и будут иметь целочисленный тип. Кроме того, при изменении значений, они должны возрастать! Если система не может однозначно определить стадию выполнения задачи, лучше уведомлять пользователя сообщением "выполняется" и т.п.
↓ Имя свойства :типы значений (значение по умолчанию)
Останавливает\возобновляет работу плагина Progressbar на
выбранных элементах.
// ------- Работа со свойством disabled ---------
// в момент установки progressbar на элемент
$("selector").progressbar({ disabled: true });
//получение значения disabled
var disabled = $("selector").progressbar( "option", "disabled" );
//изменение значения disabled
$("selector").progressbar( "option", "disabled", true );
Определяет текущее значение индикатора выполнения (должно быть в диапазоне от 0 до 100).
// ------- Работа со свойством value ---------
// в момент установки progressbar на элемент
$("selector").progressbar({ value: 37 });
//получение значения value
var value = $("selector").progressbar( "option", "value" );
//изменение значения value
$("selector").progressbar( "option", "value", 37 );
↓ Способ вызова
.progressbar("destroy")
Удаляет всю функциональность плагина progressbar с выбранных элементов.
.progressbar("disable")
Останавливает работу плагина progressbar на выбранных элементах. Для возобновления, необходимо воспользоваться методом .progressbar("enable").
.progressbar("enable")
Возобновляет работу плагина progressbar на выбранных элементах (например, после того, как она была остановлена с помощью .progressbar("disable")).
.progressbar("option", optionName, [value])
Этот метод позволяет изменять/получать свойства плагина progressbar. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .progressbar("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.progressbar("widget")
Возвращает те из выбранных элементов, к которым был применен плагин progressbar (поиск осуществляется по классу ui-progressbar, который автоматически присваивается этим элементам).
.progressbar("value", [value])
Позволяет изменять/получать текущее значение индикатора выполнения.
↓ Внутреннее имя события :внешнее имя
create:progressbarcreate
Событие create происходит в момент инициализации progressbar на элементе.
// обработка события create
$("selector").progressbar({
create: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "progressbarcreate", function(event, ui){ ... });
change:progressbarchange
Это событие происходит в момент изменения значения индикатора выполнения.
// обработка события change
$("selector").progressbar({
change: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "progressbarchange", function(event, ui){ ... });
complete:progressbarcomplete
Это событие происходит в момент, когда индикатор выполнения достигает 100%.
// обработка события complete
$("selector").complete({
complete: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "progressbarcomplete", function(event, ui){ ... });
Плагин Progressbar использует стандартные стили jQueryUI-css для оформления индикаторов выполнения. Для редактирования оформления рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с индикаторами, можно воспользоваться информацией о его структуре:
// если применить плагин Progressbar к обычному div-элементу:
~lt~div~gt~~lt~/div~gt~
// то Progressbar автоматически внесет следующие изменения:
~lt~div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"~gt~
~lt~div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"~gt~~lt~/div~gt~
~lt~/div~gt~