JQuery edenemisriba sissejuhatus

Edenemisribad on jQueryUI element. Arvestades, et me teame, et jQuery on JavaScripti teek, mida kasutatakse html-koodis ja jQuery kasutamist HTML-koodis kasutatakse kasutajaliidese komponentide hõlpsaks loomiseks või arendamiseks javascripti abil. Nii saame jQuery abil muuta oma veebisaidi mitte ainult atraktiivsemaks ja ka interaktiivsemaks. Edenemisriba on ka üks jQuery kasutajaliidese komponente, mida kasutatakse ülesande või protsessi lõpuleviimise oleku protsentides kuvamiseks.

Edenemisriba saab näidata kahel kujul, näiteks „määrame edenemisriba” ja „määramatu edenemisriba”.

  1. Edenemisriba määramine - määrake arenguriba, mida kasutame stsenaariumi korral, kus saame näidata ülesande täpset käiku või olekut. Näiteks saadetavate failide arv, protsent andmete koopiast, failide allalaadimise protsent jne. Kuna määramisriba abil saab vormi edenemist näidata protsendimäärana, näiteks 54%, või täitis rida vormi vasakult paremale.
  2. Määramatu edenemisriba - määramatu edenemisriba, mida kasutame stsenaariumi korral, kus ülesande täpne käik või olek pole teada või seda pole võimalik kindlaks teha. Näiteks ei saa me tuvastada edusamme, kui serveri ühendamise taotlus jätkub.

Edenemisriba () meetodi süntaks

Edenemisriba () meetodit saab kasutada kahel kujul -

  • $ (element, jätkub). edenemisriba (valik) meetod
  • $ (element, jätkub). edenemisriba (“tegevus”, parameetrid) meetod

Elemendi jaoks, mille jaoks me edusamme peame juhtima, saame rakendada rakendust $ (element, jätk). edenemisriba (opt) meetod html-elemendil ja edenemisriba kujul hallatav. Seevastu suvand on parameeter, mida kasutatakse erinevate väärtuste edastamiseks, et täpsustada, kuidas edenemisriba käitub ja kuidas see ilmub. Näiteks $ (“#elementid”) .protsessiriba ((väärtus: 30)), siin on väärtus suvand ja 30 on ette nähtud väärtus suvandi jaoks.

Samamoodi võime edastada mitte ainult ühe, vaid ka mitu, vaid iga valiku, mis on eraldatud komaga, nagu allpool toodud -

$ (valija, kontekst) .protsessiriba ((variant1: väärtus1, variant2: väärtus2 … ..));

Allpool on toodud erinevad võimalused, mida võime edenemisribale üle anda -

  • keelatud - keelatud suvand, kui see on seatud väärtusele true, siis see keelab edenemisribade ja false on vaikimisi väärtus keelatud.
  • max - suvand max seab edenemisriba maksimaalse väärtuse. Maksimaalse vaikeväärtus on 100.
  • väärtus - väärtusvalik, mida kasutatakse edenemisriba algväärtuse määramiseks. Väärtuse vaikeväärtus on 0.

JQuery edenemisriba näited

Edenemisriba () meetodi vaikimisi funktsionaalsus -

Järgmisena alustame mõnda näidet edenemisribal, et mõista selle funktsionaalsust. Esiteks kirjutame mõned näited, et näha edenemisriba vaikimisi funktsioone, ilma et edastada mingeid parameetreid edenemisriba () meetodile. Kuna edenemisriba on ui jQuery element, on esimene samm hõlmata jquery välisfailid, määrates elemendi atribuudi src.

Programminäide nr 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((
));
));

See on edenemisriba vaikimisi funktsionaalsus

Väljund -

Järgmisena kasutame väärtusvalikut ja anname selle üle 40-le, mis näitab, et edenemisribal on edasiminek 40%, nagu on toodud allolevas koodis -

Programminäide nr 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
));
));

See on edenemisriba vaikimisi funktsionaalsus

Väljund -

Järgmisena seadsime JqueryUI edenemisriba meetodil maksimum- ja väärtussuvanditeks vastavalt 400 ja 40%.

Programminäide nr 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;
)

See on näide edenemisribast, kui max = 400 ja väärtused = 40%

Väljund -

Edenemisriba hakkab täitma vasakult paremale ja peatub, kui see jõuab väärtuseni 400. Kui ükski väärtus ei näe ette maksimaalset võimalust, peatub täitmine ainult paremas otsas.

Elemendi jaoks, mille jaoks me edusamme peame haldama, saame rakendada html-elemendil meetodit $ (element, cont) .progressbar (“action”, params), et hallata ja toiminguid edenemisribal teha. edenemisriba kujul. Toiming on parameeter, mis määratleti esimeses argumendis stringina. Näiteks $ (“#elementid”) .progressbar (“keela”), siin keelake suvand keelake edenemisriba.

Allpool on toodud mõned toimingud, mida saab $ (element, jätk) .progressibari (toiming, parameetrid) meetodil läbida -

  • hävita - hävitamistoiming, mille abil eemaldatakse elemendi edenemisriba funktsioonid täielikult ja naasetakse elemendi initsieerimiseelsesse olekusse. See on nullargumentide meetod.
  • keelama - keelamistoiming keelab elemendi edenemisriba funktsionaalsuse. See on nullargumentide meetod.
  • luba - lubamise toiming võimaldab elemendi edenemisriba funktsionaalsust. See on nullargumentide meetod.
  • variant (suvand) - toiming suvandiga (suvand) kasutatakse määratud elemendilt väärtuse saamiseks. See aktsepteerib ühte argumendivalikut, milleks on string.
  • variant - suvandid, mida toiminguga saab edenemisriba valikul, mis on võtme: väärtuspaaride kujul. See on nullargumentide meetod.
  • variant (suvand, väärtus) - toiminguga suvand (suvand, väärtus) kasutatakse edenemisriba suvandi väärtuse määramiseks, mis on seotud määratud suvandiga.
  • suvand (suvandid) - toiminguga suvand (suvandid) kasutatakse edenemisribade ühe või mitme valiku määramiseks. See aktsepteerib ühte argumendivalikut, milleks on kaart optsiooni-väärtuse paaridega.
  • väärtus - väärtustoiming, mida kasutatakse optsioonide väärtuse saamiseks. Väärtus näitab edenemisriba täitmise protsenti.
  • väärtus (väärtus) - väärtus (väärtus), mida kasutatakse toiminguribal täidetava protsendi uue väärtuse määramiseks. See aktsepteerib ühte argumendi väärtust, mis on number.
  • vidin - vidina toiming, mida kasutatakse elemendi saamiseks, millele edenemisriba rakendatakse. See on nullargumentide meetod.

Järgmisena näeme mõnda ülaltoodud näidet edenemisribaga koos mõne toiminguga. Vaatame allolevat programmi edenemisriba () meetodi jaoks toimingutega keela () ja võtmega (suvandiNimi, väärtus) jaoks.

Programminäide nr 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;
)

See on näide toimingute keelamise edenemisribast



See on näide maksimaalse ja väärtusliku tegevuse edenemisribast

Väljund -

Ülaltoodud edenemisriba on keelatud, sellepärast ei kuvata edusamme ja allpool olev edenemisriba seadistas mõne väärtusega suvandi max ja väärtuse, nii et edenemine täitmise kujul näitab vasakult paremale.

Edenemisriba element haldab sündmusi -

Lisaks eeltoodule saab sündmuse abil hallata ka edenemisriba. JQuery kasutajaliides pakub sündmuse meetodit, sündmus käivitatakse konkreetse sündmuse jaoks. Allpool on toodud mõned sündmused, mida saab edenemisriba haldamiseks kasutada -

  • muutus (sündmus, ui) - alati, kui edenemisriba väärtus muutub või progressimuudatused selle sündmuse käivitatakse.
  • täielik (sündmus, ui) - kui edasiliikumine jõuab lõppu või jõuab maksimaalse väärtuseni, mille see sündmus genereerib.
  • loo (sündmus, ui) - kui edenemisriba luuakse, käivitatakse see sündmus.

Järgmisena kirjutage mõned näited ülaltoodud sündmuse toimingutest. Järgmine näide näitab sündmuse meetodi kasutamist edenemisriba funktsioonide ajal. See näide demonstreerib sündmuste kasutamist muutmiseks ja lõpuleviimiseks.

Programminäide # 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;
)

See on näide sündmuse edenemisribast



Laadimine …

Ülaltoodud programmi väljund on järgnevas järjestuses:

Edenemisriba hakkab täitma vasakult paremale ja peatub, kui see lõppu jõuab.

Järeldus

1. Edenemisribad on jQueryUI element.

2. Edenemisriba kasutatakse ülesande või protsessi lõpuleviimise protsendi näitamiseks.

3. Edenemisriba () meetodit saab kasutada kahel kujul -

  • $ (element, jätkub). edenemisriba (valik) meetod
  • $ (element, jätkub). edenemisriba (“tegevus”, parameetrid) meetod

4. Erinevad suvandid, mida võime progressibri () meetodile üle anda, on -

puudega

  • max
  • väärtus

5. Mõned toimingud, mida saab $ (element, cont) .progressibari (toiming, parameetrid) meetodil läbida, on -

  • hävitama
  • keelata
  • luba
  • valik
  • optsioon (optsioon, väärtus)
  • valik (valikud)
  • väärtus
  • väärtus (väärtus)
  • vidin

6. Sündmus, mida saab kasutada edenemisriba haldamiseks, on toodud allpool -

  • täielik (sündmus, ui)
  • loo (sündmus, ui)
  • muuda (sündmus, ui)

Soovitatavad artiklid

See on JQuery edenemisriba juhend. Siin käsitleme JQuery edenemisriba meetodeid ja näiteid süntaksi ja väljundiga. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -

  1. jQuery atribuudid
  2. jQuery Ajaxi meetodid
  3. jQuery efektid
  4. jQuery Alternatiivid
  5. 5 parimat Boostrap-tüüpi tüüpi koos näidiskoodiga
  6. Kuidas luua rakenduse ProgressBar JavaFX-is?

Kategooria:

Tarkvaraarendus