Uvod u JQuery Progress Bar

Trake napretka su jQueryUI element. Iako znamo da jQuery je JavaScript knjižnica, koja se koristi u html kodu, a razlog korištenja jQuery u html kodu koristi se za jednostavno kreiranje ili razvoj komponenti UI (korisničkog sučelja) pomoću JavaScripta. Dakle, uz pomoć jQuery-a, možemo učiniti našu web stranicu ne samo atraktivnijom i interaktivnijom. Traka napretka također je jedna od jQuery korisničkih sučelja koja se koristi u postocima za prikaz zadatka ili stanja dovršetka procesa.

Traku napretka možemo prikazati u dva oblika kao što je "odrediti traku napretka" i "neodređena traka napretka".

  1. Odredite traku napretka - Odredite traku napretka koju koristimo u scenariju u kojem možemo pokazati točan napredak ili status zadatka. Na primjer, broj datoteka koje šalju, postotak kopije podataka, postotak preuzimanja datoteke itd. Kako traka Odredi napredak može prikazati napredak u postotku broja obrasca poput 54%, ili je redak ispunio obrazac s lijeva na desno.
  2. Neodređeni tijek napretka - neodređena traka napretka koji koristimo u scenariju gdje je točan napredak ili status zadatka nepoznat ili se ne može utvrditi. Na primjer, ne možemo odrediti napredak kada nastavi zahtjev za povezivanje poslužitelja.

Sintaksa metode progressbar ()

Metoda progressbar () može se koristiti u dva oblika -

  • $ (element, nastavak). metoda trake napretka (opcija)
  • $ (element, nastavak). metoda trake napretka („akcija“, parame)

Element za koji trebamo upravljati napretkom, možemo primijeniti $ (element, cont). metoda trake (opt) za html element za i kojom se upravlja u obliku trake napretka. Dok je opcija parametar koji se koristi za prosljeđivanje različitih vrijednosti da bi odredio kako izgledaju i izgledaju trake napretka. Na primjer, $ ("#elementid") .progressbar ((vrijednost: 30)), ovdje je vrijednost opcija, a 30 je dana vrijednost za opciju vrijednosti.

Slično tome, možemo proći ne samo jednu opciju, već također možemo prenijeti više opcija, samo svaku opciju odvojenu zarezom kao što je dano u nastavku -

$ (selektor, kontekst) .progressbar ((opcija1: vrijednost1, opcija2: vrijednost2… ..));

U nastavku su navedene različite mogućnosti koje možemo prenijeti na traku napretka -

  • onesposobljeno - ako je opcija onemogućena ako je postavljena na vrijednost true, tada onemogućuje trake napretka, a false je zadana vrijednost invalida.
  • max - Opcija max postavlja maksimalnu vrijednost za traku napretka. Zadana vrijednost maks. Je 100.
  • vrijednost - Opcija vrijednosti koja se koristi za postavljanje početne vrijednosti trake napretka. Zadana vrijednost vrijednosti je 0.

Primjeri JQuery Progress Bar

Zadana funkcionalnost metode progressbar () -

Zatim krenimo nekoliko primjera na traci napretka da bismo razumjeli njegovu funkcionalnost. Prvo pišemo nekoliko primjera kako bismo vidjeli zadanu funkcionalnost trake napretka bez davanja bilo kojeg parametra metodi progreske (). Kako je traka napretka element ui jQuery-a, tako je prvi korak uključiti vanjske datoteke jquery specificiranjem atributa src elementa.

Primjer programa br. 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((
));
));

Ovo je zadana funkcionalnost trake napretka

Izlaz -

Zatim koristimo opciju vrijednosti i prosljeđujemo je 40, što pokazuje da je napredak 40% na traci napretka kao što je navedeno u donjem kôdu -

Primjer programa br. 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
));
));

Ovo je zadana funkcionalnost trake napretka

Izlaz -

Zatim postavljamo opcije maks i vrijednosti kao vrijednosti vrijednosti 400 i 40% respektivno u metodi JqueryUI na traci.

Primjer programa br. 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;
)

Ovo je primjer trake napretka za max = 400 i vrijednosti = 40%

Izlaz -

Traka napretka započinje s punjenjem s lijeva na desno i zaustavlja se kada dosegne vrijednost 400. Ako nijedna vrijednost ne predviđa maks. Opciju, tada se punjenje zaustavlja samo na desnom kraju.

Element za koji trebamo upravljati napretkom, možemo primijeniti metodu $ (element, cont) .progressbar ("akcija", params) na html elementu za upravljanje i izvođenje akcije na traci napretka. u obliku trake napretka. Radnja je parametar koji je naveden kao niz u prvom argumentu. Na primjer $ ("#elementid") .progressbar ('onesposobiti'), ovdje onemogućite mogućnost onemogućivanje trake napretka.

Neke radnje koje se mogu provesti, u metodi $ (element, cont) .progressbar ("akcija", params) su navedeni u nastavku -

  • uništi - Radnja uništavanja koja se koristi za potpuno uklanjanje funkcionalnosti trake napretka elementa i vraćanje u stanje prije init elementa. To je metoda bez argumenata.
  • onesposobiti - radnja onemogućivanja onemogućuje funkcionalnost trake napretka elementa. To je metoda bez argumenata.
  • enable - Radnja omogućavanja omogućava funkcionalnost trake napretka elementa. To je metoda bez argumenata.
  • mogućnost (opcija) - radnja opcije (opcija) koristi se za dobivanje vrijednosti iz navedenog elementa. Prihvaća jednu mogućnost argumenta, a to je String.
  • opcija - Akcija opcija koristi se za dobivanje opcije trake napretka koja je u obliku ključa: parovi vrijednosti. To je metoda bez argumenata.
  • opcija (opcija, vrijednost) - Radnja opcija (opcija, vrijednost) koristi se za postavljanje vrijednosti opcije na traci napretka koja je povezana s navedenom opcijom.
  • opcija (opcije) - radnja opcije (opcije) koristi se za postavljanje jedne ili više opcija za trake napretka. Prihvaća jednu mogućnost argumenta koja je preslikavanje u parove opcija-vrijednost.
  • vrijednost - Vrijednost akcija koja se koristi za dobivanje vrijednosti opcija. Vrijednost označava postotak ispunjavanja na traci napretka.
  • vrijednost (vrijednost) - radnja vrijednosti (vrijednosti) koristi se za postavljanje nove vrijednosti za postotak koji se popunjava u traci napretka. Prihvaća jednu vrijednost argumenta koja je broj.
  • widget - Radnja widgeta koja se koristi za dobivanje elementa na kojem se primjenjuje traka napretka. To je metoda bez argumenata.

Zatim vidimo neke primjere trake napretka s nekim potezima koji su spomenuti gore. Pogledajmo donji program za metodu progreske () s isključenjem () i opcijom (opcijaName, vrijednost).

Primjer programa br. 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;
)

Ovo je primjer trake napretka za akciju Onemogući



Ovo je primjer trake napretka za radnje max i vrijednosti

Izlaz -

Gornja traka napretka onemogućena je, zato ne prikazuje napredak, a ispod trake napretka postavlja se opcija maks. I vrijednosti s nekim vrijednostima, tako da napredak u obliku ispunjavanja prikazuje s lijeva na desno.

Element trake napretka upravlja događajima -

Pored navedenog, trakom napretka može se upravljati i događajem. Sučelje jQuery pruža metodu događaja, događaj se pokreće za određeni događaj. Neki od događaja koji se mogu koristiti za upravljanje trakom napretka dati su u nastavku -

  • promjena (događaj, ui) - Kad god se promijeni vrijednost trake napretka ili se mijenjaju napredak, taj se događaj pokreće.
  • dovršeno (događaj, ui) - Kada napredak ar dostigne kraj ili dosegne maksimalnu vrijednost koju ovaj događaj generira.
  • create (događaj, ui) - Kad god se stvori traka napretka, događaj se aktivira.

Zatim napišite neke od primjera gore navedene akcije. Sljedeći primjer prikazuje upotrebu metode događaja tijekom rada trake napretka. Ovaj primjer pokazuje upotrebu događaja za promjenu i dovršavanje.

Primjer programa br. 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;
)

Ovo je primjer trake napretka s događajem



Učitavam…

Izlaz gornjeg programa je u redoslijedu izvršenja koji je prikazan dolje -

Traka napretka započinje s punjenjem s lijeva na desno i zaustavlja se kada je stigla do kraja.

Zaključak

1. Trake napretka su element jQueryUI.

2. Traka napretka koristi se za prikaz stanja zadatka ili procesa izvršenja u postocima.

3. Metoda progressbar () može se koristiti u dva oblika -

  • $ (element, nastavak). metoda trake napretka (opcija)
  • $ (element, nastavak). metoda trake napretka („akcija“, parame)

4. Različite mogućnosti koje možemo prenijeti na metodu progressbar () su -

onemogućeno

  • maksimum
  • vrijednost

5. Neke od radnji koje se mogu provesti, u metodi $ (element, cont) .progressbar ("akcija", params) su -

  • uništiti
  • onemogućiti
  • omogućiti
  • opcija
  • opcija (opcija, vrijednost)
  • opcija (opcije)
  • vrijednost
  • vrijednost (vrijednost)
  • widget

6. Događaj koji se može koristiti za upravljanje trakom napretka dan je u nastavku -

  • cjelovito (događaj, ui)
  • stvoriti (događaj, ui)
  • promjena (događaj, ui)

Preporučeni članci

Ovo je vodič za JQuery Progress Bar. Ovdje smo raspravljali o metodama i primjerima JQuery Progress Bar-a sa sintaksom i izlazom. Možete također pogledati sljedeće članke da biste saznali više -

  1. JQuery Atributi
  2. jQuery Ajax metode
  3. jQuery efekti
  4. jQuery alternative
  5. Top 5 vrsta boostrapa s uzorkom koda
  6. Kako stvoriti ProgressBar u JavaFX-u?

Kategorija:

Razvoj softvera