Виджет Progressbar

Виджет Progressbarверсия добавлена: 1.6

Описание: Отображение статуса детерминированного или индетерминированного процесса.

Быстрый навигаторПримеры

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

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

Стиль

Виджет progressbar использует фреймворк CSS jQuery UI CSS для стилизации его внешнего вида. Если нужна специфическая стилизация progressbar, следующие имена классов CSS могут быть использованы для переопределения или как ключи для classes параметра:

ui-progressbar: Внешний контейнер progressbar. Этот элемент также будет иметь класс ui-progressbar-indeterminate для индетерминированных полос прогресса. Для детерминированных полос прогресса класс ui-progressbar-complete добавляется после достижения максимального значения.
- ui-progressbar-value: Элемент, представляющий заполненную часть progressbar.
  - ui-progressbar-overlay: Перекрытие, используемое для отображения анимации индетерминированных полос прогресса.

Зависимости

Дополнительные примечания:

Этот виджет требует функционального CSS, иначе он не будет работать. Если вы создаете пользовательскую тему, используйте файл CSS виджета в качестве отправной точки.

Параметры

классы

Тип: Объект

По умолчанию:

{
  "ui-progressbar": "ui-corner-all",
  "ui-progressbar-complete": "ui-corner-right",
  "ui-progressbar-value": "ui-corner-left"
}

Укажите дополнительные классы для добавления к элементам виджета. Любой из классов, указанных в разделе Стиль, может быть использован в качестве ключей для переопределения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей статьей о параметре classes.

Примеры кода:

Инициализируйте progressbar с указанным параметром classes, изменив тему для класса ui-progressbar.

$( ".selector" ).progressbar({
  classes: {
    "ui-progressbar": "highlight"
  }
});

Получить или установить свойство параметра classes, после инициализации, здесь читается и изменяется тема для класса ui-progressbar.

// Getter
var themeClass = $( ".selector" ).progressbar( "option", "classes.ui-progressbar" );
 
// Setter
$( ".selector" ).progressbar( "option", "classes.ui-progressbar", "highlight" );

выключен

Тип: Булево

По умолчанию: false

Отключает progressbar, если значение установлено в true.

Примеры кода:

Инициализируйте progressbar с указанным параметром disabled:

$( ".selector" ).progressbar({
  disabled: true
});

Получить или установить параметр disabled после инициализации:

// Getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );
 
// Setter
$( ".selector" ).progressbar( "option", "disabled", true );

макс

Тип: Число

По умолчанию: 100

Максимальное значение progressbar.

Примеры кода:

Инициализируйте progressbar с указанным параметром max:

$( ".selector" ).progressbar({
  max: 1024
});

Получить или установить параметр max после инициализации:

// Getter
var max = $( ".selector" ).progressbar( "option", "max" );
 
// Setter
$( ".selector" ).progressbar( "option", "max", 1024 );

значение

Тип: Число или Булево

По умолчанию: 0

Значение progressbar.

Поддерживаются несколько типов:

Число: Значение между 0 и max.
Булево: Значение может быть установлено в false для создания индетерминированной полосы прогресса.

Примеры кода:

Инициализируйте progressbar с указанным параметром value:

$( ".selector" ).progressbar({
  value: 25
});

Получить или установить параметр value после инициализации:

// Getter
var value = $( ".selector" ).progressbar( "option", "value" );
 
// Setter
$( ".selector" ).progressbar( "option", "value", 25 );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность progressbar. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).progressbar( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Деактивирует progressbar.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).progressbar( "disable" );

enable()Возвращает: jQuery (только для плагина)

Активирует progressbar.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).progressbar( "enable" );

instance()Возвращает: Объект

Возвращает объект экземпляра progressbar. Если у элемента нет связанного экземпляра, возвращается undefined.

В отличие от других методов виджетов, instance() можно безопасно вызвать для любого элемента после загрузки плагина progressbar.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода instance:

$( ".selector" ).progressbar( "instance" );

option( optionName )Возвращает: Объект

Возвращает значение, текуще связанное с указанным optionName.

Примечание: Для опций, у которых значение является объектом, вы можете получить значение конкретного ключа, используя обозначение точек. Например, "foo.bar" получит значение свойства bar в опции foo.

optionName

Тип: Строка

Название опции для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );

option()Возвращает: Объект

Возвращает объект, содержащий пары ключ/значение, представляющие текущий хэш опций progressbar.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).progressbar( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение опции progressbar, связанной с указанным optionName.

Примечание: Для опций, у которых значение является объектом, вы можете установить значение только одного свойства, используя обозначение точек для optionName. Например, "foo.bar" обновит только свойство bar опции foo.

optionName

Тип: Строка

Имя опции для установки.
value

Тип: Объект

Значение для установки опции.

Примеры кода:

Вызов метода:

$( ".selector" ).progressbar( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает одну или несколько опций progressbar.

options

Тип: Объект

Карта пар опция-значение для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).progressbar( "option", { disabled: true } );

value()Возвращает: Число или Булево значение

Возвращает текущее значение progressbar.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода:

var progressSoFar = $( ".selector" ).progressbar( "value" );

value( value )Возвращает: jQuery (только для плагина)

Устанавливает текущее значение progressbar.

value

Тип: Число или Булево значение

Значение для установки. Смотрите опцию value для получения информации о допустимых значениях.

Примеры кода:

Вызов метода:

$( ".selector" ).progressbar( "value", 50 );

События

change( event, ui )Тип: `progressbarchange`

Срабатывает, когда значение progressbar изменяется.

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализация progressbar с указанным обработчиком change:

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

Привязка обработчика событий к событию progressbarchange:

$( ".selector" ).on( "progressbarchange", function( event, ui ) {} );

complete( event, ui )Тип: `progressbarcomplete`

Срабатывает, когда значение progressbar достигает максимального значения.

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализация progressbar с указанным обработчиком complete:

$( ".selector" ).progressbar({
  complete: function( event, ui ) {}
});

Привязка обработчика событий к событию progressbarcomplete:

$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} );

create( event, ui )Тип: `progressbarcreate`

Срабатывает при создании progressbar.

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализация progressbar с указанным обработчиком create:

$( ".selector" ).progressbar({
  create: function( event, ui ) {}
});

Привязка обработчика событий к событию progressbarcreate:

$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} );

Примеры:

Простой progressbar jQuery UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: 37
});
</script>
 
</body>
</html>

Демо:

Простой неопределённый progressbar jQuery UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

Виджет Progressbar