Учебники

JqueryUI — Прогрессбар

Январь 2, 2019

Индикаторы выполнения показывают процент выполнения операции или процесса. Мы можем классифицировать индикатор выполнения как определенный индикатор выполнения и неопределенный индикатор выполнения .

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

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

jQueryUI предоставляет простой в использовании виджет индикатора выполнения, который мы можем использовать, чтобы пользователи знали, что наше приложение усердно выполняет запрошенную операцию. jQueryUI предоставляет метод progressbar () для создания индикаторов выполнения.

Синтаксис

Метод progressbar () можно использовать в двух формах:

Метод $ (селектор, контекст) .progressbar (параметры)

Метод $ (селектор, контекст) .progressbar («действие», параметры)

Метод $ (селектор, контекст) .progressbar (параметры)

Метод progressbar (options) объявляет, что элементом HTML можно управлять в форме индикатора выполнения. Параметр options — это объект, который определяет внешний вид и поведение индикаторов выполнения.

Синтаксис 

 $ (селектор, контекст) .progressbar (параметры);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом: 

 $ (селектор, контекст) .progressbar ({опция1: значение1, опция2: значение2 .....});

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

Sr.No. Вариант и описание
1 отключен

Эта опция, если установлено значение true, отключает индикаторы выполнения. По умолчанию его значение равно false .

Опция — отключена

Эта опция, если установлено значение true, отключает индикаторы выполнения. По умолчанию его значение равно false .

Синтаксис 

$( ".selector" ).progressbar({ disabled: true });
2 Максимум

Эта опция устанавливает максимальное значение для индикатора выполнения. По умолчанию его значение равно 100 .

Опция — макс

Эта опция устанавливает максимальное значение для индикатора выполнения. По умолчанию его значение равно 100 .

Синтаксис 

$( ".selector" ).progressbar({ max: 500});
3 значение

Эта опция указывает начальное значение индикатора выполнения. По умолчанию его значение равно 0 .

Опция — значение

Эта опция указывает начальное значение индикатора выполнения. По умолчанию его значение равно 0 .

Синтаксис 

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

Эта опция, если установлено значение true, отключает индикаторы выполнения. По умолчанию его значение равно false .

Опция — отключена

Эта опция, если установлено значение true, отключает индикаторы выполнения. По умолчанию его значение равно false .

Синтаксис

Эта опция устанавливает максимальное значение для индикатора выполнения. По умолчанию его значение равно 100 .

Опция — макс

Эта опция устанавливает максимальное значение для индикатора выполнения. По умолчанию его значение равно 100 .

Синтаксис

Эта опция указывает начальное значение индикатора выполнения. По умолчанию его значение равно 0 .

Опция — значение

Эта опция указывает начальное значение индикатора выполнения. По умолчанию его значение равно 0 .

Синтаксис

Следующий раздел покажет вам несколько рабочих примеров работы индикатора выполнения.

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности индикатора выполнения, без передачи параметров в метод progressbar () . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-1" ).progressbar({
               value: 30
            });
         });
      </script>
   </head>
   
   <body> 
      <div id = "progressbar-1"></div> 
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле progressbarexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В этом примере показано создание индикатора выполнения с использованием метода progressbar () . Это определенный индикатор выполнения по умолчанию.

Использование max и value

В следующем примере демонстрируется использование двух значений параметров и параметра max в функции индикатора выполнения JqueryUI. 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-2"></div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле progressbarexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Здесь вы можете видеть, что индикатор выполнения заполняется справа налево и останавливается, когда значение достигает 300.

Метод $ (селектор, контекст) .progressbar («действие», параметры)

Метод progressbar («action», params) может выполнять действие над индикатором выполнения, например, изменение заполненного процента. Действие указывается в виде строки в первом аргументе (например, «значение» для изменения заполненного процента). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис 

 $ (селектор, контекст) .progressbar ("действие", параметры) ;;

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

Sr.No. Действие и описание
1 уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Синтаксис 

$( ".selector" ).progressbar("destroy");
2 уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Синтаксис 

$( ".selector" ).progressbar("destroy");
3 запрещать

Это действие отключает индикатор выполнения элемента. Этот метод не принимает никаких аргументов.

Действие — отключить

Это действие отключает индикатор выполнения элемента. Этот метод не принимает никаких аргументов.

Синтаксис 

$( ".selector" ).progressbar("disable");
4 включить

Это действие включает функцию индикатора выполнения. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие включает функцию индикатора выполнения. Этот метод не принимает никаких аргументов.

Синтаксис 

$( ".selector" ).progressbar("enable");
5 опция (optionName)

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName . Где optionName — это строка.

Действие — опция (optionName)

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName . Где optionName — это строка.

Синтаксис 

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
6 вариант

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

Действие — опция

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

Синтаксис 

var options = $( ".selector" ).progressbar( "option" );
7 опция (optionName, значение)

Это действие устанавливает значение параметра ProgressBar, связанного с указанным параметром optionName .

Действие — опция (optionName, value)

Это действие устанавливает значение параметра ProgressBar, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Синтаксис 

$( ".selector" ).progressbar( "option", "disabled", true );
8 вариант (варианты)

Это действие устанавливает один или несколько параметров для индикаторов выполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для индикаторов выполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Синтаксис 

( ".selector" ).progressbar( "option", { disabled: true } );
9 значение

Это действие возвращает текущее значение options.value , то есть процент заполнения индикатора выполнения.

Действие — значение

Это действие возвращает текущее значение options.value , то есть процент заполнения индикатора выполнения.

Синтаксис 

$( ".selector" ).progressbar("value");
10 значение (значение)

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

Действие — значение (значение)

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

Синтаксис 

$( ".selector" ).progressbar( "value", 50 );
11 виджет

Это действие возвращает объект jQuery, содержащий индикатор выполнения. Этот метод не принимает никаких аргументов.

Действие — виджет

Это действие возвращает объект jQuery, содержащий индикатор выполнения. Этот метод не принимает никаких аргументов.

Синтаксис 

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

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Это действие полностью удаляет функциональность индикатора выполнения элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие отключает индикатор выполнения элемента. Этот метод не принимает никаких аргументов.

Действие — отключить

Это действие отключает индикатор выполнения элемента. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие включает функцию индикатора выполнения. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие включает функцию индикатора выполнения. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName . Где optionName — это строка.

Действие — опция (optionName)

Это действие возвращает значение, в настоящее время связанное с указанным параметром optionName . Где optionName — это строка.

Синтаксис

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

Действие — опция

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

Синтаксис

Это действие устанавливает значение параметра ProgressBar, связанного с указанным параметром optionName .

Действие — опция (optionName, value)

Это действие устанавливает значение параметра ProgressBar, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Синтаксис

Это действие устанавливает один или несколько параметров для индикаторов выполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для индикаторов выполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Синтаксис

Это действие возвращает текущее значение options.value , то есть процент заполнения индикатора выполнения.

Действие — значение

Это действие возвращает текущее значение options.value , то есть процент заполнения индикатора выполнения.

Синтаксис

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

Действие — значение (значение)

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

Синтаксис

Это действие возвращает объект jQuery, содержащий индикатор выполнения. Этот метод не принимает никаких аргументов.

Действие — виджет

Это действие возвращает объект jQuery, содержащий индикатор выполнения. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование методов disable () и option (optionName, value) . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле progressbarexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Отключенный индикатор выполнения

Индикатор выполнения с установленным максимальным значением

Управление событиями на элементах индикатора выполнения

В дополнение к методу progressbar (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

Sr.No. Метод и описание события
1 изменить (событие, интерфейс)

Это событие вызывается всякий раз, когда изменяется значение индикатора выполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — изменить (событие, пользовательский интерфейс)

Это событие вызывается всякий раз, когда изменяется значение индикатора выполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис 

$( ".selector" ).progressbar({
   change: function( event, ui ) {}
});
2 завершено (событие, интерфейс)

Это событие срабатывает, когда индикатор выполнения достигает максимального значения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — завершено (событие, пользовательский интерфейс)

> Это событие срабатывает, когда индикатор выполнения достигает максимального значения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис 

$( ".selector" ).progressbar({
   complete: function( event, ui ) {}
});
3 создать (событие, пользовательский интерфейс)

Это событие вызывается всякий раз, когда создается индикатор прогресса. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие вызывается всякий раз, когда создается индикатор прогресса. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис 

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

Это событие вызывается всякий раз, когда изменяется значение индикатора выполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — изменить (событие, пользовательский интерфейс)

Это событие вызывается всякий раз, когда изменяется значение индикатора выполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает, когда индикатор выполнения достигает максимального значения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — завершено (событие, пользовательский интерфейс)

> Это событие срабатывает, когда индикатор выполнения достигает максимального значения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается всякий раз, когда создается индикатор прогресса. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие вызывается всякий раз, когда создается индикатор прогресса. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

пример

В следующем примере демонстрируется использование метода события во время работы индикатора выполнения. Этот пример демонстрирует использование событий изменения и завершения . 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
         .progress-label {
            position: absolute;
            left: 50%;
            top: 13px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-5" );
            progressLabel = $( ".progress-label" );
            $( "#progressbar-5" ).progressbar({
               value: false,
               change: function() {
                  progressLabel.text( 
                     progressbar.progressbar( "value" ) + "%" );
               },
               complete: function() {
                  progressLabel.text( "Loading Completed!" );
               }
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-5">
         <div class = "progress-label">
            Loading...
         </div>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле progressbarexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

Здесь вы можете видеть, как индикатор прогресса меняет свое измененное значение и после завершения события «Загрузка завершена!» сообщение отображается.

53
Share: