Bevezetés a JQuery Progress Bar-ba

Az előrehaladási sávok egy jQueryUI elem. Míg tudjuk, hogy a jQuery egy JavaScript könyvtár, amelyet html kódban használnak, és a jQuery html kódban való felhasználásának oka a felhasználói felület (UI) komponensek javascript segítségével történő egyszerű létrehozására vagy fejlesztésére szolgál. Tehát a jQuery segítségével weboldalunkat nemcsak vonzóbbá és interaktívabbá tehetjük. A folyamatjelző sáv is a jQuery felhasználói felület egyik összetevője, amely a feladat vagy a folyamat befejezésének állapotának százalékos megjelenítésére szolgál.

Kétféle formában mutathatjuk meg az előrehaladási sávot, például: „meghatározhat haladási sávot” és „meghatározhatatlan haladási sávot”.

  1. Határozza meg az előrehaladási sávot - Határozza meg az előrehaladási sávot, amelyet egy forgatókönyvben használunk, ahol megmutathatjuk a feladat pontos előrehaladását vagy állapotát. Például az elküldött fájlok száma, az adatmásolatok százalékos aránya, a letöltött fájlok százaléka stb. Mivel a Határozzuk meg az előrehaladás sávot az előrehaladás az űrlapszám százalékos arányában, például 54% -ként, vagy a sor kitöltse az űrlapot balról jobbra.
  2. Nem határozott előrehaladási sáv - meghatározatlan előrehaladási sávot használunk olyan forgatókönyv esetén, ahol a feladat pontos előrehaladása vagy állapota nem ismert vagy nem állapítható meg. Például nem tudjuk meghatározni az előrehaladást, amikor a szerver csatlakoztatására irányuló kérelem folyik.

A progressbar () módszer szintaxisa

A progressbar () módszer kétféle formában használható -

  • $ (elem, folytatás). progressbar (opció) módszer
  • $ (elem, folytatás). progressbar („akció”, params) módszer

Az az elem, amelyre irányítanunk kell az előrehaladást, alkalmazhatjuk a $ (elem, folytatás) alkalmazást. haladási sáv (opt) módszer a html elemnél, és folyamatkezelő sávként kezelhető. Míg az opció egy paraméter, amelyet a különböző értékek átadására használnak annak meghatározására, hogy az előrehaladási sávok hogyan viselkedjenek és megjelenjenek. Például $ (“#elementid”) .progressbar ((value: 30)), itt az érték egy opció, a 30 pedig az érték opció megadott értéke.

Hasonlóképpen nem csak egy opciót adhatunk át, hanem egynél több opciót is átadhatunk, csak az egyes opciókat vesszővel elválasztva, az alábbiak szerint:

$ (választó, kontextus) .progressbar ((1. lehetőség: 1. érték, 2. lehetőség: 2. érték … ..));

Az alábbiakban bemutatjuk azokat a különféle lehetőségeket, amelyeket átadhatunk az előrehaladási sávnak -

  • letiltva - A letiltott opció, ha igazra van állítva, akkor letiltja a folyamatjelző sávokat, és a hamis alapértelmezett értéke a letiltott érték.
  • max - A max opció beállítja a folyamatjelző sáv maximális értékét. A max alapértelmezett értéke 100.
  • value - az érték opció, amellyel beállítható a haladási sáv kezdeti értéke. Az alapértelmezett érték 0.

Példák a JQuery Progress Bar-ra

Az progressbar () módszer alapértelmezett funkcionalitása -

Ezután kezdjük el néhány példát a folyamatjelző sávon annak megértése érdekében. Először írunk néhány példát, hogy láthassuk az előrehaladási sáv alapértelmezett funkcionalitását anélkül, hogy bármilyen paramétert átadnánk a progressbar () metódusnak. Mivel a folyamatjelző sáv az ui jQuery elem, ezért az első lépés a jquery külső fájlok beillesztése az elem src attribútumának megadásával.

1. program-példa



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

Ez az előrehaladási sáv alapértelmezett funkciója

Kimenet -

Ezután az érték opciót használjuk és átadjuk a 40-et, ami azt jelzi, hogy az előrehaladás sávjában az alábbi kódban megadott 40% -os haladás -

Programpélda # 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
));
));

Ez az előrehaladási sáv alapértelmezett funkciója

Kimenet -

Ezután a max és az érték opciókat 400, illetve 40% értékre állítottuk a JqueryUI progressbar módszerében.

3. programpélda


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

Ez a példa a folyamatjelző sávra max = 400 és értékek = 40% esetén

Kimenet -

A folyamatjelző sáv balról jobbra kezdődik, és eléri, amikor eléri a 400-at. Ha egyetlen érték nem rendelkezik a max opcióval, akkor a kitöltés csak a jobb oldalon áll le.

Az az elem, amelyre irányítanunk kell az előrehaladást, alkalmazhatjuk a $ (element, cont) .progressbar („action”, params) metódust a html elemre a haladás sávon végrehajtott és végrehajtott művelet végrehajtásához. egy folyamatjelző sáv formájában. A művelet egy paraméter, amelyet karakterláncként határoztak meg az első argumentumban. Például $ (“#elementid”) .progressbar ('Disable'), itt tiltja az opciót a folyamatjelző sáv letiltásához.

Az alábbiakban bemutatjuk azokat a műveleteket, amelyek végrehajthatók a $ (element, cont) .progressbar (“action”, params) metódusban -

  • tönkrement - Az a támadási művelet, amely egy elem haladási sávjának teljes funkcionalitását eltávolítja, és visszatér az elem pre-init állapotába. Ez egy nulla érvű módszer.
  • Disable - A Disable Action letiltja az elem folyamatjelző funkcióját. Ez egy nulla érvű módszer.
  • engedélyezés - Az engedélyezési művelet lehetővé teszi az elem folyamatjelző funkcióját. Ez egy nulla érvű módszer.
  • opció (opció) - Az opció (opció) művelet az érték megszerzésére szolgál a megadott elemtől. Egy argumentum opciót fogad el, amely egy karakterlánc.
  • opció - Az opciókkal végzett művelet eredményeként egy folyamatjelző sávot kap, amely kulcs: értékpárok formájában van. Ez egy nulla érvű módszer.
  • opció (opció, érték) - Az opció (opció, érték) művelettel határozza meg az előrehaladási sáv opciós értékét, amely a megadott opcióhoz van társítva.
  • opció (opciók) - Az opció (opciók) művelettel egy vagy több opciót állíthat be az előrehaladási sávokhoz. Egy argumentumopciót fogad el, amely az opció-érték párok közötti térkép.
  • value - az értékművelet, amelyet az opciók értékének megszerzéséhez használnak. Az érték jelzi a folyamatjelző sáv kitöltésének százalékát.
  • érték (érték) - Az érték (érték) művelet segítségével új értéket állíthat be a folyamatjelző sávban kitöltendő százalékra. Egy argumentumértéket fogad el, azaz a számot.
  • widget - A widget művelet, amelyet annak az elemnek a beszerzésére használnak, amelyre a folyamatjelző sávot alkalmazzák. Ez egy nulla érvű módszer.

Ezután néhány példát mutatunk az előrehaladási sávra néhány intézkedéssel, amelyeket fent említettek. Lásd az alábbi programot az progressbar () metódus letiltására () és az option (optionName, érték) műveletére.

Programpélda # 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;
)

Ez a példa a Letiltás művelet folyamatjelzőjére



Ez a példa a max és az érték művelet haladási sávjára

Kimenet -

A fenti folyamatjelző sáv le van tiltva, ezért nem jeleníti meg az előrehaladást, és az alábbi folyamatjelző néhány értékkel beállítja a max és az érték opciót, tehát a haladás kitöltés formájában balról jobbra mutat.

A folyamatjelző elem kezelheti az eseményeket -

A fentieken túl az előrehaladási sávot az esemény is kezelheti. A jQuery felhasználói felület biztosítja az esemény módszert, az esemény egy adott eseményre aktiválódik. Az alábbiakban bemutatjuk azokat az eseményeket, amelyek felhasználhatók az előrehaladási sáv kezelésére -

  • változás (esemény, ui) - Ha az előrehaladási sáv értéke megváltozik vagy az előrehaladás megváltozik, ez az esemény aktiválódik.
  • teljes (esemény, ui) - Amikor az előrehaladás eléri a végét vagy eléri a maximális értéket, amelyet ez az esemény generál.
  • Létrehozás (esemény, ui) - Ha a folyamatjelző sávot hoz létre, ez az esemény aktiválódik.

Ezután írjon néhány példát a fenti eseményműveletre. A következő példa bemutatja az esemény módszer használatát az előrehaladási sáv működése közben. Ez a példa bemutatja az események felhasználását a változáshoz és a teljesítéshez.

Programpélda # 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;
)

Ez a példa az eseménysávra



Betöltés…

A fenti program kimenete az alább látható végrehajtási sorrendben található -

A folyamatjelző sáv balról jobbra kezdődik, és a végére áll.

Következtetés

1. Az előrehaladási sávok egy jQueryUI elem.

2. Az előrehaladási sáv a feladat vagy a folyamat befejezésének állapotának százalékos megmutatására szolgál.

3. A progressbar () módszer kétféle formában használható -

  • $ (elem, folytatás). progressbar (opció) módszer
  • $ (elem, folytatás). progressbar („akció”, params) módszer

4. A progressbar () módszer számára átadható különféle lehetőségek:

Tiltva

  • max
  • érték

5. A $ (element, cont) .progressbar („action”, params) módszerrel végrehajtható műveletek közül néhány -

  • elpusztítani
  • disable
  • engedélyezze
  • választási lehetőség
  • opció (opció, érték)
  • opció (opciók)
  • érték
  • érték (érték)
  • modul

6. Az esemény sor, amely felhasználható az előrehaladási sáv kezelésére, az alábbiakban olvasható -

  • teljes (esemény, ui)
  • létrehozás (esemény, ui)
  • változás (esemény, ui)

Ajánlott cikkek

Ez egy útmutató a JQuery Progress Bar-hoz. Itt a JQuery Progress Bar metódusait és példáit tárgyaljuk a szintaxissal és a kimenettel. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -

  1. jQuery attribútumok
  2. jQuery Ajax Methods
  3. jQuery Effects
  4. jQuery alternatívák
  5. A Boostrap öt legnépszerűbb típusa mintakóddal
  6. Hogyan hozhatunk létre egy ProgressBar-t a JavaFX-ben?

Kategória:

Szoftverfejlesztés