Увод у ЈКуери Прогресс Бар

Траке напретка су јКуериУИ елемент. Док знамо да јКуери је ЈаваСцрипт библиотека која се користи у хтмл коду, а разлог коришћења јКуери у хтмл коду користи се за једноставно креирање или развој компоненти УИ (корисничког интерфејса) помоћу ЈаваСцрипта. Дакле, уз помоћ јКуери-а, можемо учинити нашу веб страницу не само атрактивнијом и интерактивнијом. Трака напретка је такође једна од јКуери корисничких сучеља која се користи у проценту за приказ задатка или стања завршетка процеса.

Траку напретка можемо приказати у два облика, као што су „одредити траку напретка“ и „неодређена трака напретка“.

  1. Одредите траку напретка - Одредите траку напретка коју користимо у сценарију где можемо показати тачан напредак или статус задатка. На пример, број датотека које се шаљу, проценат копије података, проценат преузимања датотеке итд. Како трака Одреди напредак може приказати напредак у проценту броја обрасца попут 54%, или је редак испунио образац с лева на десно.
  2. Неодређени бар напредак - неодређена трака напретка који користимо у сценарију где је тачан напредак или статус задатка непознат или се не може утврдити. На пример, не можемо утврдити напредак када настави захтев за повезивање сервера.

Синтакса методе прогрессбар ()

Метода прогрессбар () може се користити у два облика -

  • $ (елемент, наставак) метода траке напретка (опција)
  • $ (елемент, наставак) метода траке напретка („акција“, парамс)

Елемент којим требамо управљати напретком можемо применити $ (елемент, цонт). метода траке прогреса (опт) на хтмл елементу и управља се у облику траке напретка. Док је опција параметар који се користи за просљеђивање различитих вриједности да би се одредио начин на који траке напретка треба да се понашају и изгледају. На пример $ („#елементид“) .прогрессбар ((вредност: 30)), овде је вредност опција, а 30 је дата вредност за опцију вредности.

Слично томе, можемо проћи не само једну опцију, већ такође можемо пренијети више опција, само сваку опцију одвојену зарезом као што је наведено у даљем тексту -

$ (селектор, контекст) .прогрессбар ((опција1: вредност1, опција2: вредност2… ..));

У наставку су наведене различите опције које можемо пренијети на траку напретка -

  • онеспособљено - Онемогућена опција ако је постављена на тачно, тада онемогућује траке напретка, а лажна је подразумевана вредност онемогућено.
  • мак - Опција мак поставља максималну вредност за траку напретка. Подразумевана вредност макс. Је 100.
  • вредност - Опција вредности која се користи за подешавање почетне вредности траке напретка. Задана вредност вредности је 0.

Примери ЈКуери Прогресс Бар-а

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

Затим кренимо неколико примера на траци напретка да бисмо разумели његову функционалност. Прво пишемо неколико примера да бисмо видели подразумевану функционалност траке напретка без давања било каквих параметара методи прогреске (). Како је трака напретка елемент уи јКуери-а, тако је први корак укључити вањске датотеке јкуери специфицирањем атрибута срц елемента.

Пример програма 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
));
));

Ово је задана функционалност траке напретка

Излаз -

Затим смо поставили опције макс и вредност као 400 и 40% вредности у методи прогреса ЈкуериУИ.

Пример програма # 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;
)

Ово је пример траке напретка за мак = 400 и вредности = 40%

Излаз -

Трака напретка почиње с пуњењем с лијева на десно и зауставља се када досегне вриједност 400. Ако ниједна вриједност не предвиђа макс. Опцију, тада се пуњење зауставља само на десном крају.

Елемент којим требамо управљати напретком, можемо примијенити $ (елемент, цонт) .прогрессбар методу ("акција", парамс) на хтмл елементу за управљање и извођење акције на траци напретка. у облику траке напретка. Радња је параметар који је наведен као низ у првом аргументу. На пример $ („#елементид“) .прогрессбар („онеспособити“), овде опција за онемогућавање траке напредовања.

Неке акције које се могу пренети, у методи $ (елемент, цонт) .прогрессбар ("акција", парамс) су дате у даљем тексту -

  • уништити - Радња уништавања која се користи за потпуно уклањање функционалности траке напретка елемента и враћање у претходно инит стање елемента. То је метода без аргумената.
  • онеспособити - Акција онеспособљавања онемогућује функционалност траке напретка елемента. То је метода без аргумената.
  • енабле - Радња енабле омогућава функционисање траке напретка елемента. То је метода без аргумената.
  • опција (опција) - радња опције (опција) користи се за добијање вредности из наведеног елемента. Прихвата једну опцију аргумента, која је Стринг.
  • опција - Акција опција користи се за добијање опције траке напретка која је у облику кључа: вредности парова. То је метода без аргумената.
  • опција (опција, вредност) - Радња опција (опција, вредност) користи се за постављање вредности опције траке напретка која је повезана са наведеном опцијом.
  • опција (опције) - Радња опције (опције) користи се за постављање једне или више опција за траке напретка. Прихваћа једну опцију аргумента која је мапа парова опција-вредност.
  • вредност - Вредност акције која се користи за добијање вредности опција. Вредност означава проценат попуњавања на траци напретка.
  • вредност (вредност) - Акција вредности (вредности) користи се за постављање нове вредности за проценат који треба попунити у траци напретка. Прихвата једну вредност аргумента која је број.
  • видгет - Радња видгета која се користи за добијање елемента на који се примењује трака напретка. То је метода без аргумената.

Затим видимо неке примере траке напретка уз неке акције које су горе поменуте. Погледајмо доњи програм за метод прогреске () са акцијом онемогући () и опцијом (опцијаНаме, вредност).

Пример програма # 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;
)

Ово је пример траке напретка акције „Онемогући“



Ово је пример траке напретка за макс. И вредност акције

Излаз -

Горња трака напретка је онемогућена, зато не приказује напредак, а доња трака напретка поставља опцију макс. И вредности са неким вредностима, тако да напредак у облику испуњавања приказује с лева на десно.

Елемент траке напретка управља догађајима -

Поред горе наведеног, траком напретка може се управљати и догађајем. Корисничко сучеље јКуери пружа метод догађаја, догађај се активира за одређени догађај. Неки од догађаја који се могу користити за управљање траком напретка дати су у даљем тексту -

  • промена (догађај, уи) - Кад год се промени вредност траке напретка или промене напретка, овај догађај се покреће.
  • комплетан (догађај, уи) - Када напредак ар достигне крај или достигне максималну вредност коју овај догађај генерише.
  • цреате (догађај, уи) - Кад год се креира трака напретка, овај догађај се покреће.

Затим напишите неке од примера горње акције. Следећи пример приказује употребу метода догађаја током функционалности траке напретка. Овај пример приказује употребу догађаја за промену и довршавање.

Пример програма 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. Траке напретка су јКуериУИ елемент.

2. Трака напретка користи се за приказ стања задатка или процеса извршења у процентима.

3. Метода прогрессбар () може се користити у два облика -

  • $ (елемент, наставак) метода траке напретка (опција)
  • $ (елемент, наставак) метода траке напретка („акција“, парамс)

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

онеспособљено

  • мак
  • вредност

5. Неке акције које могу да се изврше, у методи $ (елемент, цонт) .прогрессбар ("акција", парамс) су -

  • уништити
  • онеспособити
  • омогућити
  • опција
  • опција (опција, вредност)
  • опција (опције)
  • вредност
  • вредност (вредност)
  • виџет

6. Догађај који се може користити за управљање траком напретка дат је у даљем тексту -

  • комплетан (догађај, уи)
  • створи (догађај, уи)
  • промена (догађај, уи)

Препоручени чланци

Ово је водич за ЈКуери Прогресс Бар. Овде смо расправљали о методама и примерима ЈКуери Прогресс Бар-а са синтаксом и излазом. Можда ћете такође погледати следеће чланке да бисте сазнали више -

  1. ЈКуери Атрибути
  2. јКуери Ајак Методи
  3. јКуери Еффецтс
  4. јКуери алтернативе
  5. Топ 5 врста Боострап са узорком кода
  6. Како креирати ПрогрессБар у ЈаваФКС-у?

Категорија:

Развој софтвера