JQuery Progress Bar - Руководство по JQuery Progress Bar Примеры

• Введение в JQuery Progress Bar
• Это функциональность по умолчанию для индикатора выполнения
• Это функциональность по умолчанию для индикатора выполнения
• Это пример индикатора выполнения для max = 400 и значений = 40%
• Это пример индикатора выполнения действия «Отключить»
• Это пример индикатора выполнения для действия max и value.
• Это пример выполнения с событием

Введение в JQuery Progress Bar

Индикаторы выполнения являются элементом jQueryUI. В то время как мы знаем, что jQuery - это библиотека JavaScript, которая используется в html-коде, а причина использования jQuery в html-коде - для простого создания или разработки компонентов пользовательского интерфейса (пользовательского интерфейса) с помощью javascript. Таким образом, с помощью jQuery мы можем сделать наш сайт не только более привлекательным, но и более интерактивным. Индикатор выполнения также является одним из компонентов пользовательского интерфейса jQuery, который используется для отображения задачи или состояния завершения процесса в процентах.

Мы можем отображать индикатор выполнения в двух формах, таких как «определенный индикатор выполнения» и «неопределенный индикатор выполнения».

1. Определить индикатор выполнения - определить индикатор выполнения, который мы используем в сценарии, в котором мы можем показать точный прогресс или состояние задачи. Например, число отправленных файлов, процентное соотношение копии данных, процентное соотношение загрузки файла и т. Д. В качестве индикатора выполнения «Определить» может отображаться прогресс в процентном выражении числа, например, 54%, или в строке, заполненной в форме слева направо.
2. Неопределенный индикатор выполнения - неопределенный индикатор выполнения, который мы используем в сценарии, где точный прогресс или статус задачи неизвестен или не может быть определен. Например, мы не можем определить ход выполнения запроса на подключение к серверу.

Синтаксис метода progressbar ()

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

• $ (элемент, продолжение). метод прогрессбар (опция)
• $ (элемент, продолжение). метод progressbar («действие», params)

К элементу, для которого нам нужно управлять прогрессом, мы можем применить $ (element, cont). Метод progressbar (opt) для html-элемента и управляется в виде индикатора выполнения. Принимая во внимание, что опция является параметром, используемым для передачи различных значений, чтобы указать, как индикаторы выполнения будут вести себя и отображаться. Например, $ («#elementid») .progressbar ((значение: 30)), здесь значение является параметром, а 30 - предоставленным значением для параметра значения.

Точно так же мы можем передать не только одну опцию, но мы также можем передать более одной опции только каждой опции, разделенной запятой, как указано ниже -

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

Различные параметры, которые мы можем передать на панель прогресса, приведены ниже -

• disabled. Параметр disabled, если установлено значение true, отключает индикаторы выполнения, а значение false по умолчанию отключено.
• max - опция max устанавливает максимальное значение для индикатора выполнения. Максимальное значение по умолчанию - 100.
• значение - параметр значения, используемый для установки начального значения индикатора выполнения. Значением по умолчанию является 0.

Примеры JQuery Progress Bar

Функциональность по умолчанию метода progressbar () -

Далее давайте начнем некоторые примеры с индикатора выполнения, чтобы понять его функциональность. Сначала мы напишем несколько примеров, чтобы увидеть функциональные возможности индикатора выполнения по умолчанию без передачи каких-либо параметров в метод progressbar (). Поскольку индикатор выполнения является элементом пользовательского интерфейса jQuery, первым шагом является включение внешних файлов jquery путем указания атрибута src элемента.

Пример программы № 1



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar((
));
));



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

Выход -

Далее мы используем значение параметра и передаем его 40, что означает, что прогресс на 40% в индикаторе выполнения, как показано в приведенном ниже коде -

Пример программы № 2



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));



My first jQuery UI Progress Bar example program

rel = "stylesheet">
.ui (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)

$(function() (
$( "#pbid" ).progressbar(( value : 40
));
));



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

Выход -

Затем мы устанавливаем max и value как значение 400 и 40% соответственно в методе прогрессбара JqueryUI.

Пример программы № 3


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)


My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid" ).progressbar((
value: 40,
max:400
));
var pb = $( "#pbid" );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 4000 );
));

.ui(
background: blue;
color: #333333;
border: 2px solid #DDDDDD;
font-weight: bold;
)



Это пример индикатора выполнения для max = 400 и значений = 40%

Выход -

Индикатор выполнения начинает заполняться слева направо и останавливается, когда он достигает 400. Если никакое значение не предусматривает параметр max, то заполнение останавливается только на правом конце.

Элемент, для которого нам нужно управлять прогрессом, мы можем применить метод $ (element, cont) .progressbar («action», params) к элементу html для управления и выполнения действия на индикаторе выполнения. в форме индикатора выполнения. Действие - это параметр, который указан как строка в первом аргументе. Например, $ («#elementid») .progressbar («отключить»), здесь опция «отключить» отключает индикатор выполнения.

Некоторые действия, которые можно передать в методе $ (element, cont) .progressbar («action», params), приведены ниже -

• destroy - уничтожить действие, чтобы использовать, чтобы полностью удалить функциональность индикатора выполнения элемента и вернуться в состояние pre-init элемента. Это метод с нулевым аргументом.
• disable - действие «отключить» отключает функцию индикатора выполнения элемента. Это метод с нулевым аргументом.
• enable - действие enable включает функциональность индикатора выполнения элемента. Это метод с нулевым аргументом.
• option (option) - действие option (option), используемое для получения значения из указанного элемента. Он принимает один параметр аргумента, который является строкой.
• option - действие option, используемое для получения опции индикатора выполнения в виде пар ключ: значение. Это метод с нулевым аргументом.
• option (option, value) - действие option (option, value) используется для установки значения опции индикатора выполнения, которое связано с указанной опцией.
• option (options) - действие option (options) используется для установки одного или нескольких параметров для индикаторов выполнения. Он принимает один параметр аргумента, который является отображением в пары «параметр-значение».
• значение - действие значения, используемое для получения значения параметров. Значение указывает процент заполнения в индикаторе выполнения.
• value (value) - действие value (value), используемое для установки нового значения для процента, который будет заполнен в индикаторе выполнения. Он принимает одно значение аргумента, которое является числом.
• widget - действие виджета, используемое для получения элемента, к которому применяется индикатор выполнения. Это метод с нулевым аргументом.

Далее мы видим несколько примеров индикатора выполнения с некоторыми действиями, упомянутыми выше. Посмотрим на приведенную ниже программу для метода progressbar () с действием disable () и option (optionName, value).

Пример программы № 4



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
$( "#pbid1" ).progressbar((
value: 40
));
$( "#pbid1" ).progressbar('disable');
$( "#pbid2" ).progressbar((
value: 40
));
var pb = $( "#pbid2" );
$( "#pbid2" ).progressbar( "option", "max", 400 );
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 400 );
));

.ui (
background: blue;
border: 1px solid #DDDDDD;
font-weight: bold;
color: #333333;
)



Это пример индикатора выполнения действия «Отключить»

Это пример индикатора выполнения для действия max и value.

Выход -

Приведенный выше индикатор выполнения отключен, поэтому он не отображает ход выполнения, а на приведенном ниже индикаторе выполнения установлен параметр max и value с некоторыми значениями, поэтому прогресс в виде заливки отображается слева направо.

Прогресс бар элемент управления событиями -

В дополнение к вышесказанному, индикатором может также управляться событие. Пользовательский интерфейс jQuery предоставляет метод события, событие запускается для определенного события. Некоторые из событий, которые можно использовать для управления индикатором прогресса, приведены ниже -

• change (событие, пользовательский интерфейс) - всякий раз, когда изменяется значение индикатора выполнения или изменяется прогресс, это событие вызывается.
• complete (event, ui) - Когда значение параметра ar ar достигает конца или достигает максимального значения, генерируется это событие.
• create (event, ui) - всякий раз, когда создается индикатор выполнения, это событие запускается.

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

Пример программы № 5



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)



My first jQuery UI Progress Bar example program
rel = "stylesheet">

$(function() (
pl = $( ".pbc" );
var pb = $( "#pbid" );
$( "#pbid" ).progressbar((
value: false,
change: function() (
pl.text(
pb.progressbar( "value" ) + "%" );
),
complete: function() (
pl.text( "Loading Completed!" );
)
));
function progress() (
var v = pb.progressbar( "value" ) || 0;
pb.progressbar( "value", v + 1 );
if ( v < 99 ) (
setTimeout( progress, 100 );
)
)
setTimeout( progress, 3000 );
));

.ui-widget-header (
background: blue;
border: 2px solid #DDDDDD;
color: #333333;
font-weight: bold;
)
.progress-label (
position: absolute;
top: 13px;
left: 50%;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
)



Это пример выполнения с событием

Loading …

Вывод вышеупомянутой программы в последовательности выполнения, показанной ниже -

Индикатор выполнения начинает заполняться слева направо и останавливается по достижении конца.

Вывод

1. Индикаторы выполнения являются элементом jQueryUI.

2. Индикатор выполнения используется для отображения состояния выполнения задачи или процесса в процентах.

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

• $ (элемент, продолжение). метод прогрессбар (опция)
• $ (элемент, продолжение). метод progressbar («действие», params)

4. Различные параметры, которые мы можем передать методу progressbar ():

отключен

• Максимум
• значение

5. Некоторые действия, которые можно передать в методе $ (element, cont) .progressbar («action», params):

• уничтожить
• отключить
• включить
• вариант
• опция (опция, значение)
• опция (варианты)
• значение
• значение (значение)
• виджет

6. Событие, которое можно использовать для управления индикатором прогресса, приведено ниже -

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

Рекомендуемые статьи

Это руководство по JQuery Progress Bar. Здесь мы обсуждаем методы и примеры JQuery Progress Bar с синтаксисом и выводом. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -

1. Атрибуты jQuery
2. Методы jQuery Ajax
3. jQuery Effects
4. Альтернативы jQuery
5. Лучшие 5 типов Boostrap с примером кода
6. Как создать ProgressBar в JavaFX?