Introduksjon til JQuery Progress Bar

Fremdriftslinjer er et jQueryUI-element. Mens vi vet at jQuery er et JavaScript-bibliotek, som brukes i html-kode og grunnen til å bruke jQuery i en html-kode brukes til å enkelt lage eller utvikle brukergrensesnitt (brukergrensesnitt) -komponenter ved hjelp av javascript. Så med hjelp av jQuery, kan vi gjøre nettstedet vårt ikke bare mer attraktivt og også mer interaktivt. Fremdriftslinjen er også en av jQuery UI-komponentene, som brukes til å vise oppgaven eller prosessen er fullført i prosent.

Vi kan vise fremdriftslinje i to former som "bestemme fremdriftslinje" og "ubestemmelig fremdriftslinje".

  1. Bestem fremdriftslinje - Bestem fremdriftslinjen vi bruker i et scenario der vi kan vise den nøyaktige fremdriften eller statusen til oppgaven. For eksempel antall filer som sendes, prosentandel av datakopien, prosentandel av nedlastingen av fil osv. Siden Bestem fremdriftslinje kan vise fremgang i formnummerprosent som 54%, eller linjen fylte skjemaet fra venstre til høyre.
  2. Ubestemmelig fremdriftslinje - ubestemmelig fremdriftslinje vi bruker i et scenario der den eksakte fremdriften eller statusen til oppgaven er ukjent eller ikke kan bestemmes. Vi kan for eksempel ikke bestemme fremdriften når forespørselen om å koble til serveren fortsetter.

Syntaks for fremdriftslinjen () -metoden

Fremdriftslinjen () -metoden kan brukes i to former -

  • $ (element, forts.) progressbar-metoden
  • $ (element, forts.) progressbar-metoden (“action”, params)

Elementet vi trenger for å styre fremdriften, kan vi bruke $ (element, fortsettelse). progressbar (opt) -metode på html-elementet til og administrert i form av en fremdriftslinje. Mens alternativet er en parameter som brukes til å passere de forskjellige verdiene for å spesifisere hvordan fremdriftslinjene skal være atferd og vises. For eksempel $ ("#elementid") .prosedyre ((verdi: 30)), her er verdien et alternativ og 30 er den oppgitte verdien for alternativet.

Tilsvarende kan vi passere ikke bare ett alternativ, men vi kan også passere mer enn ett alternativ bare hvert alternativ separert med komma som gitt nedenfor -

$ (velger, kontekst) .progressbar ((option1: value1, option2: value2… ..));

Nedenfor vises de forskjellige alternativene som vi kan gå til fremdriftslinjen -

  • deaktivert - Det deaktiverte alternativet, hvis det er satt til true, deaktiverer det fremdriftslinjene og falsk er en standardverdi for deaktivert.
  • maks - Alternativet maks angir maksimal verdi for en fremdriftslinje. Standardverdien for maks er 100.
  • verdi - Verdivalternativet som brukes til å angi startverdien på fremdriftslinjen. Standardverdien for verdien er 0.

Eksempler på JQuery Progress Bar

Standardfunksjonaliteten til fremdriftsraden () -metoden -

La oss deretter starte noen av eksemplene på fremdriftslinjen for å forstå funksjonaliteten. Først skriver vi noen eksempler for å se standardfunksjonaliteten til fremdriftslinjen uten å overføre noen parametere til fremdriftslinjen () -metoden. Ettersom fremdriftslinjen er et element i ui jQuery, så er det første trinnet å inkludere jquery eksterne filer ved å spesifisere til src attributtet til elementet.

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 standardfunksjonaliteten til fremdriftslinjen

Utgang -

Deretter bruker vi verdialternativ og passerer det 40, som indikerer at fremdriften 40% i fremdriftslinjen som angitt i koden nedenfor -

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 standardfunksjonaliteten til fremdriftslinjen

Utgang -

Deretter satte vi inn maks- og verdialternativer som henholdsvis 400 og 40% verdi i fremdriftslinjemetoden for 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 eksempelet på fremdriftslinjen for maks = 400 og verdier = 40%

Utgang -

Fremdriftslinjen begynner å fylle fra venstre mot høyre og stopper når den nådde 400. Hvis ingen verdi gir mulighet for maks, stopper bare fyllingen i høyre ende.

Elementet vi trenger for å styre fremdriften, kan vi bruke $ (element, fortsettelse) .progressbar (“action”, params) -metoden på html-elementet for å administrere og utføre en handling i fremdriftslinjen. i form av en fremdriftslinje. Handlingen er en parameter som er spesifisert som en streng i det første argumentet. For eksempel $ ("#elementid") .progressbar ('deaktivere'), her deaktiverer du alternativet for å deaktivere fremdriftslinjen.

Noen av handlingene som kan passeres, i $ (element, fortsettelse) .progressbar ("handling", params) -metode er gitt nedenfor -

  • ødelegge - Ødelegg-handlingen som skal brukes for å fjerne fremdriftslinjefunksjonaliteten til et element fullstendig og gå tilbake til forhåndsinit-tilstanden til et element. Det er en null-argument metode.
  • deaktiver - Deaktiver handlingen deaktiverer elementets fremdriftslinjefunksjonalitet. Det er en null-argument metode.
  • enable - Aktiver aktiviteten aktiverer elementets fremdriftslinjefunksjonalitet. Det er en null-argument metode.
  • option (option) - Alternativet (option) -handlingen bruker for å få verdi fra det spesifiserte elementet. Den godtar ett argumentalternativ, som er en streng.
  • alternativ - Alternativer handlingen bruker for å få et fremdriftslinjealternativ som er i form av nøkkel: verdipar. Det er en null-argument metode.
  • option (option, value) - Alternativet (option, value) -handlingen bruker for å angi verdien for fremdriftslinjen som er tilknyttet det spesifiserte alternativet.
  • alternativ (alternativer) - Handlingen alternativ (alternativer) bruker for å angi ett eller flere alternativer for fremdriftslinjene. Den godtar ett argumentalternativ som er et kart for alternativverdipar.
  • verdi - Verdien som brukes for å få verdien av opsjoner. Verdien indikerer prosentandelen av fylling i fremdriftslinjen.
  • verdi (verdi) - Verdien (verdien) handlingen som brukes til å angi en ny verdi for prosentandel som skal fylles i fremdriftslinjen. Den godtar en argumentverdi som er nummer.
  • widget - Widget-handlingen som brukes for å få elementet som fremdriftslinjen brukes på. Det er en null-argument metode.

Deretter ser vi noen eksempler på fremdriftslinjen med noen handlinger som er nevnt ovenfor. La oss se programmet nedenfor for fremdriftslinje () -metode med deaktiver () og alternativ (alternativ Navn, verdi).

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å fremdriftslinjen for Deaktiver handling



Dette er eksemplet på fremdriftslinjen for maks og verdi handling

Utgang -

Fremdriftslinjen ovenfor er deaktivert, det er grunnen til at det ikke viser fremgangen, og fremdriftslinjen nedenfor setter opp alternativet maks og verdi med noen verdier, så fremdriften i form av fyll vises fra venstre til høyre.

Fremdriftslinjeelement administrere hendelser -

I tillegg til det ovennevnte, kan fremdriftslinjen også administreres av arrangementet. JQuery-brukergrensesnittet gir hendelsesmetode, hendelsen blir utløst for en bestemt hendelse. Noen av hendelsene som kan brukes til å administrere fremdriftslinjen er gitt nedenfor -

  • endring (hendelse, ui) - Når fremdriftsindikatoren endres eller fremdriften endres, blir denne hendelsen utløst.
  • fullført (hendelse, ui) - Når fremdriften ar når slutten eller når den maksimale verdien denne hendelsen genererer.
  • create (event, ui) - Når fremdriftslinjen opprettes, blir denne hendelsen utløst.

Deretter skriver du noen av eksemplene på ovennevnte hendelseshandling. Følgende eksempel viser bruken av hendelsesmetoden under funksjonen til fremdriftslinjen. Dette eksemplet viser bruken av hendelser for å endre og fullføre.

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å fremdriftslinjen med hendelsen



Laster …

Utgangen fra programmet over er i eksekvenssekvensen som vises nedenfor -

Fremdriftslinjen begynner å fylles fra venstre mot høyre og stopper når den nådde slutten.

Konklusjon

1. Fremdriftslinjer er et jQueryUI-element.

2. Fremdriftslinjen brukes til å vise oppgaven eller prosessens fullføringsstatus i prosent.

3. Fremgangsmåte () -metoden kan brukes i to former -

  • $ (element, forts.) progressbar-metoden
  • $ (element, forts.) progressbar-metoden (“action”, params)

4. De forskjellige alternativene som vi kan passere til fremdriftslinjen () -metoden er -

funksjonshemmet

  • max
  • verdi

5. Noen av handlingene som kan passeres, i $ (element, fortsettelse) .progressbar (“action”, params) -metode er -

  • ødelegge
  • deaktiver
  • muliggjøre
  • alternativ
  • alternativ (alternativ, verdi)
  • alternativ (opsjoner)
  • verdi
  • verdi (verdi)
  • widget

6. Hendelsen som kan brukes til å administrere fremdriftslinjen er gitt nedenfor -

  • komplett (hendelse, ui)
  • opprette (hendelse, ui)
  • endring (hendelse, ui)

Anbefalte 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å følgende artikler for å lære mer -

  1. jQuery Attributter
  2. jQuery Ajax Methods
  3. jQuery Effects
  4. jQuery-alternativer
  5. Topp 5 typer Boostrap med prøvekode
  6. Hvordan opprette en ProgressBar i JavaFX?

Kategori:

Programvare utvikling