Руководство jQuery - progressbar(options)

Опубликовано admin - вт, 05/01/2018 - 23:02

[Function] progressbar(options)

Плагин создаёт прогрессбар

Сигнатура

progressbar(options) → jQuery

Описание

Прогрессбар предназначен для простого отображение текущего выполнения определенного процесса в процентах. Прогрессбар достаточно гибок к изменению посредством CSS и масштабированию внутри родительского элемента по умолчанию.
Данный плагин устанавливает индикатор выполнения, это значит то, что данный плагин нужно использовать в ситуациях, где система может точно обновлять текущее значение хода выполнения процесса. Индикатор выполнения не наполняется слева на право, а затем снова повторяет цикл, становясь пустым, для единичного процесса, – если действительное ход выполнения не может быть рассчитан, лучше использовать неопределенный индикатор выполнения или вращающуюся анимацию чтобы обеспечить лучший путь взаимодействия с пользователем.

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

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

  });
</script>

</head>
<body class="iframe">


<div class="demo">

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

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>Default determinate progress bar.</p>

</div><!-- End demo-description -->


</body>
</html>

Параметры

Опции

Опция: value

Значение прогрессбара.

"По умолчанию установлено"0

Создать прогрессбар с опцией value.

$('.selector').progressbar({ value: 37 });

Получать или установить опцию value после запуска.

//получить опцию
var value = $('.selector').progressbar('option', 'value');
//установить опцию
$('.selector').progressbar('option', 'value', 37);

События

Событие: change

Данное событие запускается, когда значение прогреессбара изменяется.

Установить функцию обратного вызова для обработки события change как инициализирующую опцию.

$('.selector').progressbar({
   change: function(event, ui) { ... }
});

Связать cсобытие hange с типом: progressbarchange.

$('.selector').bind('progressbarchange', function(event, ui) {
  ...
});

Событие: focus

Данное событие возникает, когда диалоговое окно попадает в фокус.

Установить обработчик события focus как инициирующую опцию.

$('.selector').dialog({
   focus: function(event, ui) { ... }
});

Связать событие focus поссредством: dialogfocus

$('.selector').bind('dialogfocus', function(event, ui) {
  ...
});

Методы

Метод: destroy

.progressbar( 'destroy' )

Полностью удаляет функциональность созданную плагином. Что возвращает элемент к его предшествующему состоянию.

Метод: disable

.progressbar( 'disable' )

Отключить прогрессбар.

Метод: enable

.progressbar( 'enable' )

Включить прогрессбар.

Метод: option

.progressbar( 'option' , optionName , [value] )

Получить или установить любую опцию прогрессбара. Если нет заданных значений, функция получает опцию.

Метод: value

.progressbar( 'value' , [value] )

Данный метод получить или установливает текущее значение прогрессбара.

Тема:

Используемая тема jQuery UI

Плагин UI Progressbar plugin использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
   <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

Примечание: Данный образец разметки создан посредством плагина progressbar, это не разметка для того чтобы создать прогрессбар. Для этого достаточно следующей разметки<div></div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Руководство по jQuery!

Плагины jQuery UI

Эффекты