Uvod v JQuery Progress Bar

Vrstice napredka so element jQueryUI. Ker vemo, da je jQuery knjižnica JavaScript, ki se uporablja v html kodi, razlog za uporabo jQuery v html kodi pa se uporablja za enostavno ustvarjanje ali razvoj komponent uporabniškega vmesnika (uporabniški vmesnik) s pomočjo JavaScript. Tako lahko s pomočjo jQuery naredimo našo spletno stran ne samo bolj privlačno in tudi bolj interaktivno. Vrstica Progress je tudi ena od komponent uporabniškega vmesnika jQuery, ki se uporablja v odstotkih za prikaz stanja opravila ali stanja dokončanja procesa.

Vrstico napredka lahko prikažemo v dveh oblikah, kot sta "določi vrstico napredka" in "nedoločena vrstica napredka".

  1. Določite vrstico napredka - Določite vrstico napredka, ki jo uporabljamo v scenariju, kjer lahko pokažemo natančen napredek ali stanje naloge. Na primer število datotek, poslanih datotek, odstotek kopije podatkov, odstotek prenosa datoteke itd. V vrstici Določi napredek se lahko prikaže napredek v odstotku števila obrazcev, kot je 54%, ali vrstica izpolni obrazec od leve proti desni.
  2. Nedoločeno zaporedje napredka - nedoločeno vrstico napredka uporabljamo v scenariju, kjer natančen napredek ali status naloge ni znan ali ga ni mogoče določiti. Na primer, ne moremo določiti napredka, ko nadaljuje zahteva po povezavi strežnika.

Sintaksa metode progressbar ()

Metoda progressbar () se lahko uporablja v dveh oblikah -

  • $ (element, nadaljevanje). metoda vrstice napredka (opcija)
  • $ (element, nadaljevanje). metoda vrstice napredka ("akcija", parame)

Element, za katerega moramo upravljati napredek, lahko uporabimo $ (element, cont). metoda vrstice napredka (opt) v elementu html do in upravljana v obliki vrstice napredka. Ker je opcija parameter, ki se uporablja za prenašanje različnih vrednosti, da se določi, kako naj se ponašajo in izgledajo vrstice napredka. Na primer $ ("#elementid") .progressbar ((vrednost: 30)), tukaj je vrednost možnost in 30 je podana vrednost za vrednost vrednosti.

Podobno lahko prenesemo ne samo eno možnost, ampak lahko prenesemo tudi več kot eno možnost samo vsako možnost, ločeno z vejico, kot je navedeno spodaj -

$ (izbirnik, kontekst) .progressbar ((opcija1: vrednost1, možnost2: vrednost2… ..));

Spodaj so podane različne možnosti, ki jih lahko prenesemo na vrstico napredka -

  • onesposobljeno - možnost onemogočena, če je nastavljena na vrednost true, potem onemogoči vrstice napredka, false pa je privzeta vrednost onemogočene.
  • max - Možnost max nastavi največjo vrednost za vrstico napredka. Privzeta vrednost max je 100.
  • vrednost - Možnost vrednosti, ki se uporablja za nastavitev začetne vrednosti vrstice napredka. Privzeta vrednost je 0.

Primeri vrstice napredka JQuery

Privzeta funkcionalnost metode progressbar () -

Nato začnimo nekaj primerov na vrstici napredka, da bomo razumeli njegovo funkcionalnost. Najprej napišemo nekaj primerov, da vidimo privzeto funkcionalnost vrstice napredka, ne da bi podali nobene parametre metodi vrstice progressbar (). Ker je vrstica napredka element ui jQuery, je tako prvi korak vključitev zunanjih datotek jquery z določitvijo atributa src elementa.

Primer programa 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((
));
));

To je privzeta funkcionalnost vrstice napredka

Izhod -

Nato uporabimo vrednost vrednost in jo prenesemo 40, kar pomeni, da je napredek 40% v vrstici napredka, kot je navedeno v spodnji kodi -

Primer programa 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
));
));

To je privzeta funkcionalnost vrstice napredka

Izhod -

Nato v metodi JqueryUI v vrstici napredka nastavimo na možnosti max in vrednost kot 400 oziroma 40%.

Primer programa # 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;
)

To je primer vrstice napredka za max = 400 in vrednosti = 40%

Izhod -

Vrstica napredka se začne polniti od leve proti desni in se ustavi, ko je dosegla 400. Če nobena vrednost ne določa možnosti max, potem se polnjenje ustavi samo na desnem koncu.

Element, za katerega moramo upravljati napredek, lahko uporabimo metodo $ (element, cont) .progressbar ("dejanje", params) za element html za upravljanje in izvedbo dejanja na vrstici napredka. v obliki vrstice napredka. Dejanje je parameter, ki je v prvem argumentu naveden kot niz. Na primer $ ("#elementid") .progressbar ('onemogoči'), tukaj možnost onemogoči onemogoči vrstico napredka.

Nekatera dejanja, ki jih je mogoče prenesti v metodi $ (element, cont) .progressbar ("dejanje", parame), so navedena spodaj -

  • uniči - Dejanje uničenja, ki ga želite uporabiti za popolno odstranitev funkcionalnosti vrstice napredka elementa in vrnitev v stanje, ki je vnaprej init. To je metoda brez argumentov.
  • onesposobiti - dejanje onemogoči onemogočanje funkcionalnosti vrstice napredka elementa. To je metoda brez argumentov.
  • enable - dejanje enable omogoča funkcijo elementa vrstice napredka. To je metoda brez argumentov.
  • option (opcija) - Dejanje opcije (opcija) uporabi za pridobitev vrednosti iz podanega elementa. Sprejema eno možnost argumenta, ki je String.
  • možnost - Dejanje z možnostmi uporabi za pridobitev možnosti vrstice napredka, ki je v obliki ključa: vrednosti parov. To je metoda brez argumentov.
  • možnost (možnost, vrednost) - dejanje možnosti (možnost, vrednost) uporablja za nastavitev vrednosti možnosti vrstice napredka, ki je povezana z določeno možnostjo.
  • možnost (možnosti) - dejanje možnosti (možnosti) uporablja za nastavitev ene ali več možnosti za vrstice napredka. Sprejema eno možnost argumenta, ki je preslikava v pari opcija-vrednost.
  • vrednost - Dejanje vrednosti, uporabljeno za pridobitev vrednosti možnosti. Vrednost označuje odstotek izpolnjevanja vrstice o poteku.
  • vrednost (vrednost) - Dejanje vrednosti (vrednost) uporabi za določitev nove vrednosti za odstotek, ki ga je treba zapolniti v vrstici napredka. Sprejema eno vrednost argumenta, ki je število.
  • widget - Dejanje gradnika, ki se uporablja za pridobitev elementa, na katerem je uporabljena vrstica napredka. To je metoda brez argumentov.

Nato vidimo nekaj primerov vrstice napredka z nekaj dejanji, ki so omenjeni zgoraj. Oglejmo si spodnji program za metodo vrstice napredka () z delom onemogoči () in možnost (možnostName, vrednost).

Primer programa # 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;
)

To je primer vrstice napredka za deaktiviranje



To je primer vrstice napredka za največje in vrednostno delovanje

Izhod -

Zgornja vrstica napredka je onemogočena, zato ne prikazuje napredka, spodnja vrstica napredka pa nastavi nekaj in največjo vrednost z nekaterimi vrednostmi, tako da je napredek v obliki polnila, prikazan od leve proti desni.

Element vrstice napredka upravlja z dogodki -

Poleg navedenega lahko vrstico z napredkom upravlja tudi dogodek. Uporabniški vmesnik jQuery ponuja način dogodka, dogodek se sproži za določen dogodek. Nekateri dogodki, ki jih lahko uporabimo za upravljanje vrstice napredka, so navedeni spodaj -

  • sprememba (dogodek, ui) - kadar koli se spremeni vrednost vrstice napredka ali se spremeni napredek, se ta dogodek sproži.
  • popoln (dogodek, ui) - Ko ar doseže konec ali doseže največjo vrednost, ki jo ta dogodek ustvari.
  • create (dogodek, ui) - Kadar koli je ustvarjena vrstica napredka, se ta dogodek sproži.

Nato napišite nekaj primerov zgornjega dejanja dogodka. Naslednji primer prikazuje uporabo metode dogodka med funkcijo vrstice napredka. Ta primer prikazuje uporabo dogodkov za spreminjanje in dokončanje.

Primer programa 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;
)

To je primer vrstice napredka z dogodkom



Nalaganje…

Izhod zgornjega programa je v zaporedju izvajanja, ki je prikazano spodaj -

Vrstica napredka se začne polniti od leve proti desni in se ustavi, ko je prišla do konca.

Zaključek

1. Vrstice napredka so element jQueryUI.

2. Vrstica napredka se uporablja za prikazovanje stanja opravila ali procesa dokončanja procesa.

3. Metoda progressbar () se lahko uporablja v dveh oblikah -

  • $ (element, nadaljevanje). metoda vrstice napredka (opcija)
  • $ (element, nadaljevanje). metoda vrstice napredka ("akcija", parame)

4. Različne možnosti, ki jih lahko posredujemo metodi vrstice progressbar (), so -

onemogočeno

  • maks
  • vrednost

5. Nekatera dejanja, ki jih je mogoče prenesti v metodi $ (element, cont) .progressbar ("dejanje", parame), so -

  • uničiti
  • onemogoči
  • omogočiti
  • možnost
  • možnost (možnost, vrednost)
  • možnost (možnosti)
  • vrednost
  • vrednost (vrednost)
  • gradnik

6. Dogodek, ki se lahko uporablja za upravljanje vrstice napredka, je naveden spodaj -

  • popoln (dogodek, ui)
  • ustvari (dogodek, ui)
  • sprememba (dogodek, ui)

Priporočeni članki

To je vodnik za JQuery Progress Bar. Tukaj razpravljamo o metodah in primerih JQuery Progress Bar s sintakso in izhodom. Za več informacij si lahko ogledate tudi naslednje članke -

  1. Atributi jQuery
  2. jQuery Ajax metode
  3. jQuery efekti
  4. jQuery alternative
  5. Najboljših 5 vrst podaljška z vzorčno kodo
  6. Kako ustvariti ProgressBar v JavaFX?

Kategorija:

Razvoj programske opreme