Progressbar :: Индикатор Движения
Описание: Показывает статус выполнения определенного процесса.Description: Display status of a determinate process.
Пример странички Индикатор Движения Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.
Пример странички Индикатор Движения Анимированный (Animated):
можно посмотреть здесь.
Пример странички Индикатор Движения со сменой Размера (Resizable progressbar):
можно посмотреть здесь.
Теория
Тесты по теории можно посмотреть здесь.
Options (Опции)
disabled
Type: Boolean
Default: false
Disables the progressbar if set to true.
Выключает Индикатор Движения, если опция установлена на значение true (истина).
Code examples: (Примеры кода: )
Initialize the progressbar with the disabled option specified:
Инициализация Индикатора Движения с определенной опцией disabled:
$( ".selector" ).progressbar({ disabled: true }); |
Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:
// gettervar disabled = $( ".selector" ).progressbar( "option", "disabled" );// setter$( ".selector" ).progressbar( "option", "disabled", true ); |
max
Type: Number
Default: 0
The maximum value of the progressbar.
Максимально возможное значение Индикатора Движения.
Code examples: (Примеры кода: )
Initialize the progressbar with the max option specified:
Инициализация Индикатора Движения с определенной опцией max:
$( ".selector" ).progressbar({ max: 1024 }); |
Get or set the max option, after initialization:
Можно получить или установить опцию max после инициализации:
// gettervar max = $( ".selector" ).progressbar( "option", "max" );// setter$( ".selector" ).progressbar( "option", "max", 1024 ); |
value
Type: Number
Default: 0
The value of the progressbar.
Текущее значение Индикатора Движения.
Code examples: (Примеры кода: )
Initialize the progressbar with the value option specified:
Инициализация Индикатора Движения с определенной опцией value:
$( ".selector" ).progressbar({ value: 25 }); |
Get or set the value option, after initialization:
Можно получить или установить опцию value после инициализации:
// gettervar value = $( ".selector" ).progressbar( "option", "value" );// setter$( ".selector" ).progressbar( "option", "value", 25 ); |
Methods (Методы)
destroy()
Removes the progressbar functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.
Полностью удаляет функциональность Индикатора Движения. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).progressbar( "destroy" ); |
disable()
Disables the progressbar.
• This method does not accept any arguments.
Выключает Индикатор Движения.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).progressbar( "disable" ); |
enable()
Enables the progressbar.
• This method does not accept any arguments.
Включает Индикатор Движения.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).progressbar( "enable" ); |
option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" ); |
option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current progressbar options hash.
• This method does not accept any arguments.
Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Индикатора Движения.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).progressbar( "option" ); |
option( optionName, value )
Sets the value of the progressbar option associated with the specified optionName.
Устанавливает значение опции Индикатора Движения, связанное с определенным optionName (именем опции).
• optionName
Type: String
The name of the option to set.
Имя опции для установки.
• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).progressbar( "option", "disabled", true ); |
option( options )
Sets one or more options for the progressbar.
Устанавливает одну или более опций для Индикатора Движения.
• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).progressbar( "option", { disabled: true } ); |
value()
Returns: Number
Gets the current value of the progressbar.
• This method does not accept any arguments.
Получает текущее значение Индикатора Движения.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var progressSoFar = $( ".selector" ).progressbar( "value" ); |
value( value )
Sets the current value of the progressbar.
Устанавливает текущее значение для Индикатора Движения.
• value
Type: Number
The value to set.
Значение для установки.
Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).progressbar( "value", 50 ); |
widget()
Returns a jQuery object containing the progressbar.
• This method does not accept any arguments.
Возвращает объект jQuery, содержащий Индикатор Движения.
• Этот метод не принимает никаких аргументов.
Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).progressbar( "widget" ); |
Events (События)
change( event, ui )
Type: progressbarchange
Triggered when the value of the progressbar changes.
• event
Type: Event
• ui
Type: Object
Code examples: (Примеры кода: )
Initialize the progressbar with the change callback specified:
$( ".selector" ).progressbar({ change: function( event, ui ) {}}); |
Bind an event listener to the progressbarchange event:
$( ".selector" ).on( "progressbarchange", function( event, ui ) {} ); |
complete( event, ui )
Type: progressbarcomplete
Triggered when the value of the progressbar reaches the maximum value.
• event
Type: Event
• ui
Type: Object
Code examples: (Примеры кода: )
Initialize the progressbar with the complete callback specified:
$( ".selector" ).progressbar({ complete: function( event, ui ) {}}); |
Bind an event listener to the progressbarcomplete event:
$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} ); |
create( event, ui )
Type: progressbarcreate
Triggered when the progressbar is created.
• event
Type: Event
• ui
Type: Object
Code examples: (Примеры кода: )
Initialize the progressbar with the create callback specified:
$( ".selector" ).progressbar({ create: function( event, ui ) {}}); |
Bind an event listener to the progressbarcreate event:
$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} ); |
Overview (Обзор)
The progress bar is designed to display the current percent complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside its parent container by default.
This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar or spinner animation is a better way to provide user feedback.
Индикатор Движения (progress bar) разработан для показа на сколько процентов выполнен какой-либо процесс. Сам Индикатор Движения запрограммирован так, чтобы обеспечить максимальную гибкость с помощью CSS. Индикатор Движения по умолчанию формирует свою шкалу беря размеры родительского контейнера.
Индикатор Движения может быть использован только в ситуациях, когда система может точно обновлять его текущее состояние (т.е. Индикатор Движения есть определяемый элемент). Индикатор Движения не может заполняться слева направо, когда обратный цикл используется для обнуления с помощщью простого процесса. Если текущее состояние не может быть рассчитано, то неопределенный Индикатор Движения или анимированный Спиннер будут лучшими путями для обеспечения отклика пользователя.
Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.
Example:
Example: A simple jQuery UI Progressbar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>progressbar demo</title></head><body><div id="progressbar"></div><script>$( "#progressbar" ).progressbar({ value: 37});</script></body></html> |
Примеры Индикатора Движения на этом сайте: Дефолтный, Анимированный, РазмероСменяемый.
