Introduktion til JQuery Progress Bar

Fremdriftsbjælker er et jQueryUI-element. Mens vi ved, at jQuery er et JavaScript-bibliotek, der bruges i html-kode, og grunden til at bruge jQuery i en html-kode bruges til let at oprette eller udvikle UI (brugergrænseflade) -komponenter ved javascript. Så med hjælp fra jQuery kan vi gøre vores websted ikke kun mere attraktiv og også mere interaktiv. Fremdriftslinjen er også en af ​​jQuery-brugergrænsefladekomponenterne, der bruges til at vise opgaven eller processens afsluttende tilstand i procent.

Vi kan vise statuslinje i to former, såsom "bestemme statuslinje" og "ubestemmelig statuslinje".

  1. Bestem statuslinje - Bestem statuslinje, vi bruger i et scenarie, hvor vi kan vise den nøjagtige fremgang eller status for opgaven. F.eks. Antal sendte filer, procentdel af datakopien, procentdel af filoverførslen osv. Da Bestem statusvinduet kan vise fremskridt i formularens procentdel som 54%, eller linjen udfyldte formularen fra venstre til højre.
  2. Ubestemmelig fremdriftsindikator - ubestemmelig fremdriftslinje, vi bruger i et scenario, hvor den nøjagtige fremgang eller status for opgaven er ukendt eller ikke kan bestemmes. For eksempel kan vi ikke bestemme fremskridt, når anmodningen om at oprette forbindelse til serveren fortsætter.

Syntaks af metoden Progressbar ()

Fremgangsmåden () kan bruges i to former -

  • $ (element, fortsat). progressbar-metode (option)
  • $ (element, fortsat). progressbar-metode (“action”, params)

Det element, som vi har brug for for at administrere fremskridtene, kan vi anvende $ (element, fortsat). progressbar (opt) -metode på html-elementet til og styres i form af en progress bar. Mens valgmulighed er en parameter, der bruges til at videregive de forskellige værdier for at specificere, hvordan de fremdriftslinjer, der skal være adfærd og vises. For eksempel $ (“#elementid”) .protokol ((value: 30)), her er værdien en indstilling og 30 er den angivne værdi for optionen.

Tilsvarende kan vi ikke kun videregive en mulighed, men vi kan også videregive mere end en mulighed bare hver mulighed adskilt af kommaet som vist nedenfor -

$ (vælger, kontekst) .progressbar ((option1: value1, option2: value2… ..));

De forskellige muligheder, som vi kan videregive til proceslinjen, er vist nedenfor -

  • deaktiveret - Funktionen deaktiveret, hvis den er indstillet til true, deaktiverer den forløbssøjlerne og falsk er en standardværdi for deaktiveret.
  • max - Indstillingen maks indstiller den maksimale værdi for en statuslinje. Standardværdien for max er 100.
  • værdi - Den værdiindstilling, der bruges til at indstille den indledende værdi af statuslinjen. Standardværdien for værdien er 0.

Eksempler på JQuery Progress Bar

Standardfunktionaliteten til progressbar () -metoden -

Lad os derefter starte nogle af eksemplerne på statuslinjen for at forstå dens funktionalitet. Først skriver vi nogle eksempler for at se standardfunktionaliteten i proceslinjen uden at overføre nogen parametre til progressbar () -metoden. Da fremdriftslinjen er et element i ui jQuery, så det første trin er at inkludere jquery eksterne filer ved at specificere til elementets src-attribut.

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

Dette er standardfunktionaliteten på proceslinjen

Output -

Dernæst bruger vi værdiindstilling og videregiver den 40, hvilket indikerer, at fremskridt 40% i statuslinjen er angivet i nedenstående kode -

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

Dette er standardfunktionaliteten på proceslinjen

Output -

Derefter indstiller vi til max og værdiindstillinger som henholdsvis 400 og 40% værdi i progressbar-metoden i JqueryUI.

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

Dette er eksemplet på statuslinjen for max = 400 og værdier = 40%

Output -

Fremdriftslinjen begynder at udfylde fra venstre mod højre og stopper, når den nåede 400. Hvis der ikke er nogen værdi for den maksimale indstilling, stopper udfyldningen kun i højre ende.

Det element, som vi har brug for for at administrere fremskridtene, kan vi anvende $ (element, fortsat) .progressbar (“handling”, params) -metode på html-elementet for at administrere og udføre en handling på proceslinjen. i form af en statuslinje. Handlingen er en parameter, der er specificeret som en streng i det første argument. For eksempel $ (“#elementid”) .progressbar ('deaktivere'), her deaktiverer option deaktiverer proceslinjen.

Nogle af de handlinger, der kan videregives, i $ (element, fortsat) .progressbar ("handling", params) metode er angivet nedenfor -

  • ødelægge - Destruktionshandlingen, der skal bruges til at fjerne statuselementets funktionalitetsbjælke fuldstændigt og vende tilbage til et elements pre-init-tilstand. Det er en nul-argument metode.
  • deaktiver - Handlingen deaktiverer deaktiverer elementets statuslinjefunktionalitet. Det er en nul-argument metode.
  • enable - Aktivér handlingen aktiverer elementets progress bar funktionalitet. Det er en nul-argument metode.
  • option (option) - Handlingen option (option) bruges til at få værdi fra det specificerede element. Den accepterer en argumentindstilling, som er en streng.
  • option - Funktionerne til brug af indstillinger til at få en statusindstillingslinje, der er i form af nøgle: værdipar. Det er en nul-argument metode.
  • option (option, value) - Handlingen option (option, value) bruges til at indstille den værdi for statusindstillingslinjen, der er knyttet til den specificerede option.
  • option (optioner) - Handlingen option (optioner) bruges til at indstille en eller flere indstillinger til statuslinjerne. Det accepterer en argumentindstilling, som er et kort til indstillingsværdipar.
  • værdi - Værdien handling, der bruges til at få værdien af ​​indstillinger. Værdien angiver procentdelen af ​​udfyldning i statuslinjen.
  • værdi (værdi) - Handlingen værdi (værdi), der bruges til at indstille en ny værdi for procentdel, der skal udfyldes i statuslinjen. Den accepterer en argumentværdi, som er nummer.
  • widget - Den widget-handling, der bruges til at få det element, som progressionslinjen anvendes på. Det er en nul-argument metode.

Dernæst ser vi nogle eksempler på statuslinjen med nogle handlinger, der nævnes ovenfor. Lad os se nedenstående program til fremskridtslinje () -metode med deaktivering () og option (option Navn, værdi) handling.

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

Dette er eksemplet på statuslinjen til Deaktiver handling



Dette er eksemplet på proceslinjen til maksimal og værdi handling

Output -

Ovenstående fremdriftslinje er deaktiveret, det er derfor, det ikke viser fremskridtene, og nedenstående fremdriftsbjælke indstiller muligheden for maks og værdi med nogle værdier, så fremskridt i form af udfyldning vises fra venstre til højre.

Element i statuslinjen administrerer begivenheder -

Ud over ovenstående kan statuslinjen også styres af begivenheden. JQuery UI leverer begivenhedsmetode, begivenheden bliver udløst til en bestemt begivenhed. Nogle af begivenhederne, der kan bruges til at styre fremdriftslinjen, er vist nedenfor -

  • ændring (begivenhed, ui) - Hver gang statuslinjen ændrer eller ændrer fremskridt denne begivenhed udløses.
  • komplet (begivenhed, ui) - Når fremgangen ar når slutningen eller når den maksimale værdi, denne begivenhed får genereret.
  • oprette (begivenhed, ui) - Hver gang der oprettes statuslinje, udløses denne begivenhed.

Skriv derefter nogle af eksemplerne på ovenstående begivenhedshandling. Følgende eksempel viser anvendelsen af ​​begivenhedsmetoden under funktionaliteten i statuslinjen. Dette eksempel viser brugen af ​​begivenheder til at ændre og afslutte.

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

Dette er eksemplet på statuslinjen med begivenhed



Indlæser…

Outputet fra ovenstående program er i eksekvenssekvensen, der viser nedenfor -

Fremdriftslinjen begynder at udfylde fra venstre mod højre og stopper, når den nåede slutningen.

Konklusion

1. Fremskridtsbjælker er et jQueryUI-element.

2. Fremdriftslinjen bruges til at vise opgave- eller procesafslutningsstatus i procent.

3. Metoden Progressbar () kan bruges i to former -

  • $ (element, fortsat). progressbar-metode (option)
  • $ (element, fortsat). progressbar-metode (“action”, params)

4. De forskellige indstillinger, som vi kan videregive til progressbar-metoden (), er -

handicappet

  • max
  • værdi

5. Nogle af de handlinger, der kan videregives, i $ (element, fortsat) .progressbar ("handling", params) -metode er -

  • ødelægge
  • deaktivere
  • gøre det muligt for
  • mulighed
  • mulighed (option, værdi)
  • mulighed (optioner)
  • værdi
  • værdi (værdi)
  • widget

6. Den begivenhed, der kan bruges til at styre statuslinjen, er vist nedenfor -

  • komplet (begivenhed, ui)
  • oprette (begivenhed, ui)
  • ændring (begivenhed, ui)

Anbefalede artikler

Dette er en guide til JQuery Progress Bar. Her diskuterer vi JQuery Progress Bar metoder og eksempler med syntaks og output. Du kan også se på de følgende artikler for at lære mere -

  1. jQuery Attributter
  2. jQuery Ajax-metoder
  3. jQuery Effects
  4. jQuery-alternativer
  5. Top 5 typer boostrap med prøvekode
  6. Sådan oprettes en ProgressBar i JavaFX?

Kategori:

Softwareudvikling