Introducere în JQuery Progress Bar

Barele de progres sunt un element jQueryUI. Întrucât știm că jQuery este o bibliotecă JavaScript, care este folosită în codul html, iar motivul pentru care se utilizează jQuery într-un cod html este utilizat pentru a crea sau dezvolta cu ușurință componente UI (interfață de utilizator) de către javascript. Deci, cu ajutorul jQuery, putem face site-ul nostru web nu numai mai atractiv și mai interactiv. Bara de progres este, de asemenea, una dintre componentele UI jQuery, care este utilizată pentru a arăta sarcina sau starea finalizării procesului în procente.

Putem afișa bara de progres în două forme, cum ar fi „bara de progres determinată” și „bara de progres nedeterminată”.

  1. Determinați progres bara - Determinați bara de progres pe care o folosim într-un scenariu în care putem arăta progresul exact sau starea sarcinii. De exemplu, numere de fișiere trimise, procent de copiere a datelor, procent de descărcare a fișierului, etc. Deoarece bara de progres Determinată poate afișa progresul în procentul de număr de formular ca 54% sau linia a completat formularul de la stânga la dreapta.
  2. Bara de progres nedeterminată - bara de progres indeterminată pe care o folosim într-un scenariu în care progresul sau starea exactă a sarcinii nu sunt cunoscute sau nu pot fi determinate. De exemplu, nu putem determina progresul atunci când se continuă cererea de conectare a serverului.

Sintaxa metodei barei de progres ()

Metoda de bara de progres () poate fi folosită în două forme -

  • $ (element, cont). progresă (opțiune) metodă
  • $ (element, cont). bara de progres (metoda „acțiune”, parame)

Elementul pentru care trebuie să gestionăm progresul, putem aplica $ (element, cont). progresbar (opt) metodă pe elementul html către și gestionat sub forma unei bare de progres. Întrucât opțiunea este un parametru utilizat pentru trecerea diferitelor valori pentru a specifica modul în care trebuie să se comporte și să apară barele de progres. De exemplu $ („#elementid”) .progressbar ((valoare: 30)), aici valoarea este o opțiune și 30 este opțiunea furnizată pentru valoare.

În mod similar, putem trece nu numai o opțiune, dar putem trece, de asemenea, mai mult de o opțiune doar fiecare opțiune separată de virgulă, așa cum este dată mai jos -

$ (selector, context) .progressbar ((opțiunea1: valoare1, opțiunea2: valoarea2 … ..));

Diferitele opțiuni pe care le putem trece în bara de progres sunt prezentate mai jos -

  • dezactivat - Opțiunea dezactivată dacă este setată pe adevărat, atunci acesta dezactivează barele de progres și fals este o valoare implicită a dezactivat.
  • max - Opțiunea max stabilește valoarea maximă pentru o bară de progres. Valoarea implicită a max este 100.
  • valoare - opțiunea de valoare utilizată pentru a seta valoarea inițială a barei de progres. Valoarea implicită a valorii este 0.

Exemple de JQuery Progress Bar

Funcționalitatea implicită a metodei barei de progres () -

În continuare, să începem câteva exemple din bara de progres pentru a înțelege funcționalitatea acesteia. În primul rând, scriem câteva exemple pentru a vedea funcționalitatea implicită a barei de progres fără a trece niciun parametru la metoda Progresului (). Deoarece bara de progres este un element al ui jQuery, la fel, primul pas este să includeți fișierele jquery externe, specificând atributul src al elementului.

Exemplul nr. 1 de program



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

Aceasta este funcționalitatea implicită a barei de progres

Rezultat -

În continuare, folosim opțiunea de valoare și o trecem 40, ceea ce indică faptul că progresul 40% în bara de progres, așa cum este dat în codul de mai jos -

Exemplul nr. 2 al programului



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

Aceasta este funcționalitatea implicită a barei de progres

Rezultat -

În continuare, setăm opțiuni maxime și valorice ca valoare 400 și 40%, respectiv, în metoda de bare de progres a JqueryUI.

Exemplul nr. 3 al programului


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

Acesta este exemplul barei de progres pentru max = 400 și valori = 40%

Rezultat -

Bara de progres începe să se umple de la stânga la dreapta și se oprește când a ajuns la 400. Dacă nicio valoare nu prevede opțiunea maximă, umplerea se oprește doar la capătul drept.

Elementul pentru care trebuie să gestionăm progresul, putem aplica metoda $ (element, cont) .progressbar („acțiune”, parame) pe elementul html pentru a gestiona și efectua o acțiune pe bara de progres. sub forma unei bare de progres. Acțiunea este un parametru care s-a specificat ca șir în primul argument. De exemplu $ ("#elementid") .progressbar ('dezactivare'), aici opțiunea dezactivare dezactivează bara de progres.

Unele dintre acțiunile care pot fi trecute, în metoda $ (element, cont) .progressbar („acțiune”, parame) sunt prezentate mai jos -

  • distruge - Acțiunea de distrugere de utilizat pentru a elimina complet funcționalitatea barei de progres a unui element și a reveni la starea pre-init a unui element. Este o metodă cu argument zero.
  • dezactivare - Acțiunea dezactivare dezactivează funcționalitatea barei de progres a elementului. Este o metodă cu argument zero.
  • activare - Acțiunea de activare permite funcționalitatea barei de progres a elementului. Este o metodă cu argument zero.
  • opțiune (opțiune) - Acțiunea opțiune (opțiune) utilizată pentru a obține valoare din elementul specificat. Accepta o opțiune de argument, care este o șir.
  • opțiune - Opțiunile de acțiune utilizate pentru a obține o opțiune de bare de progres, care este sub forma cheii: perechi de valori. Este o metodă cu argument zero.
  • opțiune (opțiune, valoare) - Acțiunea opțiune (opțiune, valoare) utilizează pentru a seta valoarea opțiunii barei de progres care este asociată cu opțiunea specificată.
  • opțiune (opțiuni) - Acțiunea opțiune (opțiuni) folosește pentru a seta una sau mai multe opțiuni pentru barele de progres. Acceptă o opțiune de argument, care este o hartă a perechilor opțiune-valoare.
  • valoare - acțiunea valorică folosită pentru a obține valoarea opțiunilor. Valoarea indică procentul de completare în bara de progres.
  • valoare (valoare) - Valoarea (valoarea) acțiune folosită pentru a seta o nouă valoare pentru procentul care trebuie completat în bara de progres. Accepta o valoare argumentală care este numărul.
  • widget - Acțiunea widget folosită pentru obținerea elementului pe care se aplică bara de progres. Este o metodă cu argument zero.

În continuare, vedem câteva exemple de bara de progres cu unele acțiuni menționate mai sus. Vedeți programul de mai jos pentru metoda bara de progres () cu acțiunea dezactivare () și opțiune (opțiuneNume, valoare).

Exemplul nr. 4 al programului



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

Acesta este exemplul barei de progres pentru Dezactivare acțiune



Acesta este exemplul barei de progres pentru acțiunea maximă și valorică

Rezultat -

Bara de progres de mai sus este dezactivată, de aceea nu se afișează progresul, iar bara de progres de mai jos setează opțiunea maximă și o valoare cu unele valori, deci progresul sub forma de completare se afișează de la stânga la dreapta.

Elementul barei de progres gestionează evenimentele -

Pe lângă cele de mai sus, bara de progres poate fi gestionată și de eveniment. Interfața de utilizare jQuery oferă metoda evenimentului, evenimentul este declanșat pentru un anumit eveniment. Unele dintre evenimentele care pot fi utilizate pentru a gestiona bara de progres sunt prezentate mai jos -

  • change (eveniment, ui) - De fiecare dată când se modifică sau se modifică progresul valorii barei de progres, acest eveniment se declanșează.
  • complet (eveniment, ui) - Când progresul ar ajunge la sfârșit sau atinge valoarea maximă, acest eveniment este generat.
  • create (eveniment, ui) - Ori de câte ori este creată bara de progres, acest eveniment este declanșat.

În continuare, scrieți câteva exemple din acțiunea evenimentului de mai sus. Următorul exemplu demonstrează utilizarea metodei evenimentului în timpul funcționalității barei de progres. Acest exemplu demonstrează utilizarea evenimentelor pentru schimbare și completare.

Exemplul nr. 5 al programului



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

Acesta este exemplul barei de progres cu eveniment



Se încarcă…

Rezultatul programului de mai sus este în secvența de execuție prezentată mai jos -

Bara de progres începe să se umple de la stânga la dreapta și se oprește când a ajuns la sfârșit.

Concluzie

1. Barele de progres sunt un element jQueryUI.

2. Bara de progres este utilizată pentru a afișa starea de finalizare a sarcinii sau a procesului în procente.

3. Metoda barei de progres () poate fi folosită în două forme -

  • $ (element, cont). progresă (opțiune) metodă
  • $ (element, cont). bara de progres (metoda „acțiune”, parame)

4. Diferitele opțiuni pe care le putem trece la metoda barei de progres () sunt -

dezactivat

  • max
  • valoare

5. Unele dintre acțiunile care pot fi trecute, în metoda $ (element, cont) .progressbar („acțiune”, parame) sunt -

  • distruge
  • Dezactivați
  • permite
  • opțiune
  • opțiune (opțiune, valoare)
  • opțiune (opțiuni)
  • valoare
  • valoare (valoare)
  • widget

6. Evenimentul care poate fi utilizat pentru a gestiona bara de progres este prezentat mai jos -

  • complet (eveniment, ui)
  • crea (eveniment, ui)
  • schimbare (eveniment, ui)

Articole recomandate

Acesta este un ghid la JQuery Progress Bar. Aici discutăm metodele și exemplele JQuery Progress Bar cu sintaxa și ieșire. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -

  1. jQuery Atribute
  2. jQuery Metode Ajax
  3. Efecte jQuery
  4. jQuery alternative
  5. Top 5 tipuri de Boostrap cu cod de eșantion
  6. Cum să creați un ProgressBar în JavaFX?

Categorie:

Dezvoltare de software