JQuery-etenemispalkki - Opas JQuery-edistymispalkkiesimerkkeihin

• Johdanto JQuery-edistymispalkkiin
• Tämä on etenemispalkin oletustoiminto
• Tämä on etenemispalkin oletustoiminto
• Tämä on esimerkki etenemispalkista, kun enimmäismäärä = 400 ja arvot = 40%
• Tämä on esimerkki käytöstä poistamisen edistymispalkista
• Tämä on esimerkki maksimi- ja arvotoimintojen etenemispalkista
• Tämä on esimerkki tapahtuman edistymispalkista

Johdanto JQuery-edistymispalkkiin

Edistymispalkit ovat jQueryUI-elementti. Vaikka tiedämme, että jQuery on JavaScript-kirjasto, jota käytetään html-koodissa, ja syytä jQueryn käyttämiseen html-koodissa käytetään helposti luomaan tai kehittämään käyttöliittymän komponentteja JavaScriptin avulla. JQueryn avulla voimme siis tehdä verkkosivustoltamme paitsi houkuttelevamman ja myös vuorovaikutteisemman. Edistymispalkki on myös yksi jQuery-käyttöliittymän komponenteista, jota käytetään osoittamaan tehtävän tai prosessin valmistumistila prosentteina.

Voimme näyttää edistymispalkin kahdessa muodossa, kuten “määritetään edistymispalkki” ja “määrittelemätön edistymispalkki”.

1. Määritä edistymispalkki - Määritä etenemispalkki, jota käytämme skenaariossa, jossa voimme näyttää tehtävän tarkan etenemisen tai tilan. Esimerkiksi lähetettyjen tiedostojen lukumäärä, prosenttiosuus kopiosta, tiedostojen lataamisen prosenttiosuus jne. Koska Määritä etenemispalkki voi näyttää edistymisen lomakkeen lukumäärässä, kuten 54%, tai rivi täytti lomakkeen vasemmalta oikealle.
2. Määrittelemätön edistymispalkki - määrittelemätön edistymispalkki, jota käytämme tilanteessa, jossa tehtävän tarkkaa etenemistä tai tilaa ei tunneta tai sitä ei voida määrittää. Emme voi esimerkiksi määrittää etenemistä, kun palvelimen yhdistämispyyntö etenee.

Etenemispalkin () menetelmän syntaksi

Etenemispalkki () -menetelmää voidaan käyttää kahdessa muodossa -

• $ (elementti, jatko). etenemispalkki (valinnainen) menetelmä
• $ (elementti, jatko). etenemispalkki (”toiminta”, params) menetelmä

Elementti, jota varten meidän on hallittava etenemistä, voimme käyttää $ (elementti, jatko). html-elementin edistymispalkki (opt) -menetelmä edistymispalkkiin ja sitä hallitaan. Asetus on parametri, jota käytetään eri arvojen siirtämiseen sen määrittämiseksi, miten etenemispalkit käyttäytyvät ja näkyvät. Esimerkiksi $ (“#elementid”) .progressbar ((arvo: 30)), tässä arvo on vaihtoehto ja 30 on arvo-vaihtoehdon annettu arvo.

Samoin voimme välittää paitsi yhden vaihtoehdon, mutta voimme myös ohittaa useamman kuin yhden vaihtoehdon, vain jokaisen vaihtoehdon erotettuna pilkulla, kuten alla on annettu -

$ (valitsin, konteksti) .progressbar ((vaihtoehto1: arvo1, vaihtoehto2: arvo2 … ..));

Eri vaihtoehdot, jotka voimme siirtää etenemispalkkiin, on annettu alla -

• Disabled - Disabled ( Ei käytössä), jos asetus on tosi, se poistaa etenemispalkit käytöstä ja false on oletusarvo käytöstä.
• max - Max-asetus asettaa etenemispalkin maksimiarvon. Enimmäisarvon oletusarvo on 100.
• arvo - Arvovaihtoehto, jolla asetetaan etenemispalkin alkuarvo. Arvon oletusarvo on 0.

Esimerkkejä JQuery-edistymispalkista

Progressbar () -menetelmän oletustoiminto -

Seuraavaksi aloitetaan joitain esimerkkejä edistymispalkista ymmärtääksesi sen toiminnallisuutta. Ensin kirjoitamme joitain esimerkkejä nähdäksesi etenemispalkin oletustoiminnot siirtämättä mitään parametreja progressbar () -menetelmään. Koska etenemispalkki on osa ui jQuery -sovellusta, niin ensimmäinen askel on sisällyttää ulkoiset jquery-tiedostot määrittelemällä elementin src-määrite.

Ohjelmaesimerkki # 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((
));
));



Tämä on etenemispalkin oletustoiminto

Tulos -

Seuraavaksi käytämme arvovaihtoehtoa ja lähetämme sen 40, mikä osoittaa, että edistyminen 40% edistymispalkissa alla olevan koodin mukaisesti -

Ohjelmaesimerkki # 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
));
));



Tämä on etenemispalkin oletustoiminto

Tulos -

Seuraavaksi asetamme maksimi- ja arvoasetuksiksi vastaavasti 400 ja 40% arvoksi JqueryUI: n edistymispalkkimenetelmässä.

Ohjelmaesimerkki # 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;
)



Tämä on esimerkki etenemispalkista, kun enimmäismäärä = 400 ja arvot = 40%

Tulos -

Edistymispalkki alkaa täyttyä vasemmalta oikealle ja pysähtyy, kun se on saavuttanut 400. Jos mikään arvo ei sisällä enimmäisvaihtoehtoa, täyttö pysähtyy vain oikeassa päässä.

Elementti, jonka edessä meidän on hallittava edistymistä, voimme käyttää $ (element, cont) .progressbar (“action”, params) -menetelmää html-elementtiin hallitaksesi ja suorittaaksesi toiminnan etenemispalkissa. edistymispalkin muodossa. Toiminto on parametri, joka määritettiin merkkijonona ensimmäisessä argumentissa. Esimerkiksi $ (“#elementid”) .progressbar ('poista'), tässä Poista vaihtoehto käytöstä etenemispalkki.

Jotkut toimista, jotka voidaan suorittaa $ (elementti, jatko) .progressbar (”toiminta”, parametrit) -menetelmässä, on annettu alla -

• tuhoa - tuhoamistoimi, jolla poistetaan elementin edistymispalkkitoiminnot kokonaan ja palataan elementin pre-init-tilaan. Se on nollaargumentti menetelmä.
• pois käytöstä - Poista toiminta poistaa elementin edistymispalkin toiminnot. Se on nollaargumentti menetelmä.
• Ota käyttöön - Ota toiminto mahdollistaa elementin etenemispalkin toiminnallisuuden. Se on nollaargumentti menetelmä.
• optio (lisävaruste) - Vaihtoehto (lisävaruste) -toiminto käyttää arvon saamista määritetystä elementistä. Se hyväksyy yhden argumenttivaihtoehdon, joka on merkkijono.
• optio - Asetukset-toiminnolla saadaan edistymispalkkivaihtoehto, joka on avaimen: arvoparien muodossa. Se on nollaargumentti menetelmä.
• optio (optio, arvo) - Optio (optio, arvo) -toiminnolla asetetaan etenemispalkin vaihtoehdon arvo, joka liittyy määritettyyn optioon.
• vaihtoehto (valinnat) - Vaihtoehto (valinnat) -toiminto asettaa yhden tai useamman vaihtoehdon etenemispalkkeihin. Se hyväksyy yhden argumenttivaihtoehdon, joka on kartta vaihtoehto-arvo-pareihin.
• arvo - arvotoiminto, jota käytetään optioiden arvon hankkimiseen. Arvo ilmaisee etenemispalkin täyttöprosentin.
• arvo (arvo) - Arvo (arvo) -toiminto asettaa uuden arvon prosenttimäärälle, joka täytetään edistymispalkissa. Se hyväksyy yhden argumenttiarvon, joka on numero.
• widget - widget-toiminto, jonka avulla saadaan elementti, johon edistymispalkki on asennettu. Se on nollaargumentti menetelmä.

Seuraavaksi näemme joitain esimerkkejä edistymispalkista joillakin toimilla, jotka on mainittu edellä. Katsotaan alla olevaa ohjelmaa edistymispalkki () -menetelmälle käytöstä () ja lisätoiminnolla (optionNimi, arvo).

Ohjelmaesimerkki # 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;
)



Tämä on esimerkki käytöstä poistamisen edistymispalkista

Tämä on esimerkki maksimi- ja arvotoimintojen etenemispalkista

Tulos -

Yllä oleva edistymispalkki on poistettu käytöstä, minkä vuoksi se ei näytä etenemistä ja alla oleva edistymispalkki asetti maksimi- ja arvo-vaihtoehdon joillakin arvoilla, joten eteneminen täyttömuodossa näyttää vasemmalta oikealle.

Edistymispalkkielementti hallitse tapahtumia -

Edellä mainitun lisäksi edistyspalkkia voi hallita myös tapahtuma. JQuery-käyttöliittymä tarjoaa tapahtumamenetelmän, tapahtuma laukaistaan ​​tietylle tapahtumalle. Joitakin tapahtumia, joita voidaan käyttää edistymispalkin hallintaan, on annettu alla -

• muutos (tapahtuma, ui) - Aina kun edistymispalkin arvo muuttuu tai edistymismuutos muuttuu, tämä tapahtuma laukaistaan.
• valmis (tapahtuma, ui) - Kun eteneminen ar saavuttaa lopun tai saavuttaa maksimiarvon, jonka tämä tapahtuma saa aikaan.
• luo (tapahtuma, ui) - Aina kun edistymispalkki luodaan, tämä tapahtuma laukaistaan.

Kirjoita seuraavaksi joitain esimerkkejä yllä olevasta tapahtumasta. Seuraava esimerkki osoittaa tapahtumamenetelmän käytön edistymispalkin toiminnallisuuden aikana. Tämä esimerkki osoittaa tapahtumien käytön muutoksen ja loppuun saattamisen kannalta.

Ohjelmaesimerkki # 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;
)



Tämä on esimerkki tapahtuman edistymispalkista

Ladataan…

Edellä mainitun ohjelman lähtö on seuraavassa esitetyssä suoritusjärjestyksessä -

Edistymispalkki alkaa täyttyä vasemmalta oikealle ja pysähtyy saavuttaessaan lopun.

johtopäätös

1. Edistymispalkit ovat jQueryUI-elementti.

2. Edistyspalkkia käytetään osoittamaan tehtävän tai prosessin suorittamisen tila prosentteina.

3. Etenemispalkki () -menetelmää voidaan käyttää kahdessa muodossa -

• $ (elementti, jatko). etenemispalkki (valinnainen) menetelmä
• $ (elementti, jatko). etenemispalkki (”toiminta”, params) menetelmä

4. Eri vaihtoehdot, jotka voimme siirtää progressbar () -menetelmään, ovat -

liikuntarajoitteinen

• max
• arvo

5. Jotkut toimista, jotka voidaan suorittaa $ (elementti, jatko) .progressbar (”action”, params) -menetelmällä, ovat -

• tuhota
• Poista käytöstä
• ota käyttöön
• vaihtoehto
• optio (optio, arvo)
• vaihtoehto (vaihtoehdot)
• arvo
• arvo (arvo)
• vekotin

6. Tapahtuma, jota voidaan käyttää edistymispalkin hallintaan, on annettu alla -

• valmis (tapahtuma, ui)
• luo (tapahtuma, ui)
• muutos (tapahtuma, ui)

Suositellut artikkelit

Tämä on opas JQuery-etenemispalkkiin. Tässä keskustellaan JQuery Progress Bar -menetelmistä ja esimerkeistä syntaksin ja tulosteen kanssa. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

1. jQuery-määritteet
2. jQuery Ajax -menetelmät
3. jQuery-tehosteet
4. jQuery-vaihtoehdot
5. 5 suosittua Boostrap-tyyppiä näytekoodilla
6. Kuinka luoda ProgressBar JavaFX: ään?