Въведение в лентата за напредък на JQuery

Прогресните ленти са jQueryUI елемент. Докато знаем, че jQuery е JavaScript библиотека, която се използва в html код и причината за използването на jQuery в HTML код се използва за лесно създаване или разработване на компоненти на потребителския интерфейс (потребителски интерфейс) чрез javascript. Така че с помощта на jQuery можем да направим нашия уебсайт не само по-привлекателен, но и по-интерактивен. Лентата „Прогрес“ е също един от компонентите на потребителския интерфейс на jQuery, който се използва за показване на процента на задачата или състоянието на завършване на процеса.

Можем да покажем лентата за прогрес в две форми като „определяне на лентата на напредъка“ и „неопределена лента на напредъка“.

  1. Определете лентата за напредъка - Определете лентата за напредъка, която използваме в сценарий, където можем да покажем точния напредък или статус на задачата. Например брой изпратени файлове, процент от копието на данни, процент от изтеглянето на файла и т.н. Тъй като лентата за определяне на напредъка може да покаже напредък в броя на формата като 54%, или редът попълва формата отляво надясно.
  2. Индетерминиран бар прогрес - неопределена лента за напредък, която използваме в сценарий, при който точният напредък или статус на задачата е неизвестен или не може да бъде определен. Например, не можем да определим напредъка, когато заявката за свързване на сървъра продължава.

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

Методътbarbar () може да се използва в две форми -

  • $ (елемент, продължение). метод на лентата на прогреса (опция)
  • $ (елемент, продължение). метод на лентата на прогреса („действие“, парами)

Елементът, за който трябва да управляваме напредъка, можем да приложим $ (element, cont). метод на лентата на прогреса (opt) на html елемента към и управляван под формата на лента за напредък. Като има предвид, че опцията е параметър, използван за предаване на различните стойности, за да се определи как да се появят и да се показват лентите за напредък. Например $ ("#elementid") .progressbar ((стойност: 30)), тук стойността е опция и 30 е предоставената стойност за опцията за стойност.

По подобен начин можем да предадем не само една опция, но също така можем да предадем повече от една опция само всяка опция, разделена със запетаята, както е дадено по-долу -

$ (селектор, контекст) .progressbar ((option1: value1, option2: value2… ..));

Различните опции, които можем да преминем към лентата на прогреса, са дадени по-долу -

  • disabled - опцията за деактивирани, ако е зададена на true, то деактивира лентите за напредък, а false е стойност по подразбиране на забранено.
  • max - Опцията max задава максималната стойност за лента за напредък. Стойността по подразбиране на макс. Е 100.
  • стойност - Опцията стойност, използвана за задаване на началната стойност на лентата за прогрес. Стойността по подразбиране е 0.

Примери за JQuery Progress Bar

Функцията по подразбиране на метода на лентата на прогреса () -

На следващо място, нека започнем някои от примерите на лентата на напредъка, за да разберем неговата функционалност. Първо, ние пишем някои примери, за да видим функционалността по подразбиране на лентата на прогреса, без да предаваме никакви параметри към метода на лентата на прогреса (). Тъй като лентата за напредък е елемент на ui 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. Ако няма стойност, която предвижда максималната опция, тогава запълването спира само в десния край.

Елементът, за който трябва да управляваме прогреса, можем да приложим метода $ (element, cont) .progressbar ("действие", парами) върху html елемента, за да управляваме и изпълняваме действие на лентата на напредъка. под формата на лента за напредък. Действието е параметър, посочен като низ в първия аргумент. Например $ („#elementid“) .progressbar („деактивиране“), тук опцията за деактивиране деактивира лентата на прогреса.

Някои от действията, които могат да бъдат извършени, в метода $ (елемент, cont) .progressbar ("действие", парами) са дадени по-долу -

  • унищожи - Действието за унищожаване, което трябва да се използва, за да премахне изцяло функционалността на лентата за прогрес на даден елемент и да се върне в предварителното състояние на даден елемент. Това е метод с нулев аргумент.
  • забрани - Действието за дезактивиране деактивира функционалността на лентата за напредък на елемента. Това е метод с нулев аргумент.
  • enable - Действието за активиране позволява на функционалността на лентата за напредък на елемента. Това е метод с нулев аргумент.
  • опция (опция) - използва се действието опция (опция) за получаване на стойност от посочения елемент. Той приема една опция за аргумент, която е String.
  • Опция - Опциите с опции се използват за получаване на опция на лентата за напредък, която е под формата на ключ: стойност двойки. Това е метод с нулев аргумент.
  • Опция (опция, стойност) - Действието опция (опция, стойност) използва за задаване на стойността на опцията на лентата на прогреса, която е свързана с определената опция.
  • Опция (опции) - Действието опция (опции) използва за задаване на една или повече опции за лентите за напредък. Той приема една опция за аргумент, която е карта на двойки опция-стойност.
  • value - Стойностното действие, използвано за получаване на стойността на опциите. Стойността показва процента на запълване в лентата на хода.
  • стойност (стойност) - Използва се действието (стойност), за да се зададе нова стойност за процент, който трябва да бъде попълнен в лентата на хода. Той приема една стойност на аргумента, която е число.
  • джаджа - Действието на джаджа, използвано за получаване на елемента, върху който е приложена лентата за прогрес. Това е метод с нулев аргумент.

По-нататък виждаме някои примери за лентата на напредъка с някои действия, които са споменати по-горе. Да видим по-долу програмата за методbarbar () с действие enable () и опция (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;
)

Това е примерът на лентата за прогресиране за действие Disable



Това е пример за лентата на прогреса за макс и стойност действие

Резултат -

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

Елементът от лентата на прогреса управлява събития -

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

  • промяна (събитие, ui) - Всеки път, когато се промени стойността на лентата на прогреса или се променя промяната, това събитие се задейства.
  • пълен (събитие, ui) - Когато напредъкът достигне края или достигне максималната стойност, която това събитие генерира.
  • 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;
)

Това е пример за лентата на прогреса със събитие



Зареждане…

Резултатът от горната програма е в последователността на изпълнение, показана по-долу -

Лента за напредък започва да се запълва отляво надясно и спира, когато достигне края.

заключение

1. Прогресните ленти са jQueryUI елемент.

2. Лентата за напредък се използва за показване на задачата или състоянието на завършване на процеса в проценти.

3. Методът barbar () може да се използва в две форми -

  • $ (елемент, продължение). метод на лентата на прогреса (опция)
  • $ (елемент, продължение). метод на лентата на прогреса („действие“, парами)

4. Различните опции, които можем да предадем на метода на лентата на прогреса (), са -

хора с увреждания

  • макс
  • стойност

5. Някои от действията, които могат да бъдат извършени, в метод $ (елемент, продължение) .progressbar („действие“, парами) са -

  • унищожи
  • деактивиране
  • се даде възможност на
  • опция
  • опция (опция, стойност)
  • опция (опции)
  • стойност
  • стойност (стойност)
  • джаджа

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

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

Препоръчителни статии

Това е ръководство за JQuery Progress Bar. Тук обсъждаме методите и примерите на JQuery Progress Bar със синтаксиса и изхода. Може да разгледате и следните статии, за да научите повече -

  1. jQuery Атрибути
  2. jQuery Ajax методи
  3. jQuery ефекти
  4. jQuery Алтернативи
  5. Топ 5 вида Boostrap с примерен код
  6. Как да създадете ProgressBar в JavaFX?

Категория:

Разработване на софтуер