Úvod do JQuery Progress Bar

Indikátory priebehu sú prvkom jQueryUI. Zatiaľ čo vieme, že jQuery je knižnica JavaScript, ktorá sa používa v html kóde a dôvod na použitie jQuery v html kóde sa používa na ľahké vytváranie alebo vývoj komponentov UI (užívateľské rozhranie) pomocou javascriptu. Takže pomocou jQuery môžeme urobiť náš web nielen atraktívnejším, ale aj interaktívnejším. Lišta postupu je tiež jednou z komponentov používateľského rozhrania jQuery, ktorá sa používa na zobrazenie stavu dokončenia úlohy alebo procesu v percentách.

Mieru pokroku môžeme zobraziť v dvoch formách, ako napríklad „určiť indikátor postupu“ a „neurčitý indikátor postupu“.

  1. Určite lištu pokroku - Určte lištu pokroku, ktorú používame v scenári, kde môžeme ukázať presný pokrok alebo stav úlohy. Napríklad počet odoslaných súborov, percentuálny podiel kopírovania údajov, percentuálny podiel stiahnutých súborov atď. Ako lišta Určiť priebeh môže ukazovať pokrok v percentuálnom vyjadrení počtu formulárov, napríklad 54%, alebo riadok vyplnil formulár zľava doprava.
  2. Neurčitá lišta priebehu - Neurčitá lišta priebehu používame v scenári, kde presný pokrok alebo stav úlohy nie je známy alebo sa nedá určiť. Nemôžeme napríklad určiť pokrok, keď žiadosť o pripojenie k serveru pokračuje.

Syntax metódy progressbar ()

Metódu progressbar () je možné použiť v dvoch formách -

  • $ (element, cont). metóda progressbar (voliteľná)
  • $ (element, cont). progressbar („action“, params) metóda

Prvok, pre ktorý potrebujeme riadiť pokrok, môžeme použiť $ (element, cont). progressbar (opt) metóda na html elemente a spravovaná vo forme progress baru. Zatiaľ čo voľba je parameter používaný na odovzdávanie rôznych hodnôt na určenie, ako sa majú ukazovať priebeh správania a ako sa objavia. Napríklad $ (“#elementid”) .progressbar ((hodnota: 30)), tu je možnosť a 30 je poskytnutá hodnota pre hodnotu.

Podobne môžeme odovzdať nielen jednu možnosť, ale môžeme tiež odovzdať viac ako jednu možnosť len každú možnosť oddelenú čiarkou, ako je uvedené nižšie -

$ (selektor, kontext) .progressbar ((option1: value1, option2: value2… ..));

Rôzne možnosti, ktoré môžeme preniesť na panel postupu, sú uvedené nižšie -

  • disabled - Vypnutá možnosť, ak je nastavená na true, zakáže indikátor priebehu a false je predvolená hodnota disabled.
  • max - Možnosť max nastavuje maximálnu hodnotu pre lištu postupu. Predvolená hodnota maxima je 100.
  • value - Voľba hodnoty použitá na nastavenie počiatočnej hodnoty lišty postupu. Predvolená hodnota je 0.

Príklady JQuery Progress Bar

Predvolená funkčnosť metódy progressbar () -

Ďalej začnime s niektorými príkladmi na paneli postupu, aby sme pochopili jeho funkčnosť. Najprv napíšeme niekoľko príkladov, aby sme videli predvolenú funkčnosť lišty postupu bez toho, aby sme do metódy progressbar () preniesli akékoľvek parametre. Pretože indikátor priebehu je prvkom ui jQuery, prvým krokom je zahrnutie externých súborov jQuery zadaním atribútu src prvku.

Príklad programu č. 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((
));
));

Toto je predvolená funkcia na lište postupu

Výkon -

Ďalej použijeme možnosť value a odovzdáme ju 40, čo znamená, že priebeh 40% v lište postupu je uvedený v nižšie uvedenom kóde -

Príklad programu č. 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
));
));

Toto je predvolená funkcia na lište postupu

Výkon -

Ďalej sme v metóde progressbar v JqueryUI nastavili na max. A na hodnotu 40%.

Príklad programu č. 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;
)

Toto je príklad ukazovateľa priebehu pre max = 400 a hodnoty = 40%

Výkon -

Indikátor priebehu začne plniť zľava doprava a zastaví sa, keď dosiahne 400. Ak žiadna hodnota nestanovuje možnosť max, vyplnenie sa zastaví iba na pravom konci.

Prvok, pre ktorý potrebujeme riadiť pokrok, môžeme na prvok html použiť $ (element, cont) .progressbar („action“, params), aby sme mohli riadiť a vykonávať akciu na indikátore pokroku. vo forme ukazovateľa priebehu. Akcia je parameter, ktorý bol v prvom argumente zadaný ako reťazec. Napríklad $ (“#elementid”) .progressbar ('vypnúť'), tu vypnite voľbu vypnúť lištu postupu.

Niektoré z akcií, ktoré je možné odovzdať, sú uvedené v metóde $ (element, cont) .progressbar („action“, params) -

  • zničiť - akcia zničenia, ktorá sa má použiť na úplné odstránenie funkcie priebehovej lišty prvku a návrat do stavu pred spustením prvku. Je to metóda s nulovým argumentom.
  • disable - Akcia disable zakáže funkčnosť lišty postupu v prvku. Je to metóda s nulovým argumentom.
  • enable - Aktivácia povoľuje funkčnosť lišty postupu v prvku. Je to metóda s nulovým argumentom.
  • option (option) - Akcia option (option) slúži na získanie hodnoty zo zadaného prvku. Akceptuje jednu možnosť argumentu, ktorou je String.
  • option - Akcia options (Možnosti) slúži na získanie voľby na indikátore priebehu, ktorá je vo forme párov kľúč: hodnota. Je to metóda s nulovým argumentom.
  • option (option, value) - Akcia option (option, value) sa používa na nastavenie hodnoty voľby progress bar, ktorá je priradená k zadanej možnosti.
  • option (options) - Akcia option (options) slúži na nastavenie jednej alebo viacerých možností pre lišty postupu. Prijíma jednu argumentovú možnosť, ktorou je mapa k párom hodnota-hodnota.
  • value - Hodnota akcie použitá na získanie hodnoty možností. Hodnota označuje percentuálny podiel výplne na indikátore priebehu.
  • value (value) - Akcia value (value) slúži na nastavenie novej hodnoty pre percento, ktoré sa má vyplniť na lište priebehu. Prijíma jednu argumentovú hodnotu, ktorou je číslo.
  • widget - Akcia widgetu použitá na získanie prvku, na ktorý je použitá lišta priebehu. Je to metóda s nulovým argumentom.

Ďalej vidíme niekoľko príkladov ukazovateľa pokroku s niektorými činnosťami, ktoré sú uvedené vyššie. Pozrime sa na metódu progressbar () uvedenú nižšie s akciou disable () a option (optionName, value).

Príklad programu č. 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;
)

Toto je príklad ukazovateľa priebehu akcie Zakázať



Toto je príklad ukazovateľa priebehu pre maximálnu a hodnotovú akciu

Výkon -

Vyššie uvedený pruh postupu je zakázaný, preto nezobrazuje priebeh a spodný pruh postupu nastavuje možnosť max. A hodnotu s niektorými hodnotami, takže pokrok vo forme výplne sa zobrazuje zľava doprava.

Prvok na lište postupu zobrazuje udalosti -

Okrem vyššie uvedeného môže udalosť riadiť aj indikátor priebehu. Používateľské rozhranie jQuery poskytuje metódu udalosti, udalosť sa spustí pre konkrétnu udalosť. Niektoré z udalostí, ktoré sa dajú použiť na správu lišty postupu, sú uvedené nižšie -

  • change (event, ui) - Vždy, keď sa zmení hodnota stĺpca postupu alebo zmeny priebehu, táto udalosť sa spustí.
  • complete (event, ui) - Keď pokrok ar dosiahne koniec alebo dosiahne maximálnu hodnotu, táto udalosť sa vygeneruje.
  • create (event, ui) - Vždy, keď sa vytvorí lišta priebehu, táto udalosť sa spustí.

Ďalej napíšte niekoľko príkladov vyššie uvedenej akcie udalosti. Nasledujúci príklad demonštruje použitie metódy udalosti počas funkčnosti lišty postupu. Tento príklad ukazuje použitie udalostí na zmenu a dokončenie.

Príklad programu č. 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;
)

Toto je príklad ukazovateľa priebehu s udalosťou



Načítava…

Výstup z vyššie uvedeného programu je v poradí vykonávania, ktoré je uvedené nižšie -

Indikátor priebehu sa začne plniť zľava doprava a zastaví sa, keď dosiahne koniec.

záver

1. Indikátory priebehu sú prvkom jQueryUI.

2. Lišta postupu sa používa na zobrazenie stavu dokončenia úlohy alebo procesu v percentách.

3. Metódu progressbar () je možné použiť v dvoch formách -

  • $ (element, cont). metóda progressbar (voliteľná)
  • $ (element, cont). progressbar („action“, params) metóda

4. Rôzne možnosti, ktoré môžeme preniesť do metódy progressbar (), sú -

invalidný

  • max
  • hodnota

5. Niektoré z akcií, ktoré môžu byť odovzdané, v metóde $ (element, cont) .progressbar („action“, params) sú -

  • zničiť
  • disable
  • umožniť
  • voľba
  • možnosť (možnosť, hodnota)
  • možnosť (možnosti)
  • hodnota
  • hodnota (hodnota)
  • widget

6. Udalosť, ktorú je možné použiť na správu lišty postupu, je uvedená nižšie -

  • kompletný (udalosť, ui)
  • vytvoriť (udalosť, ui)
  • zmena (udalosť, ui)

Odporúčané články

Toto je sprievodca JQuery Progress Bar. Tu diskutujeme metódy a príklady JQuery Progress Bar so syntaxou a výstupom. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

  1. Atribúty jQuery
  2. jQuery Ajax metódy
  3. jQuery Effects
  4. jQuery Alternatívy
  5. Top 5 typov podprsenky s ukážkovým kódom
  6. Ako vytvoriť ProgressBar v JavaFXe?

Kategórie:

Vývoj softvéru