Inleiding tot de voortgangsbalk van JQuery

Voortgangsbalken zijn een jQueryUI-element. Terwijl we weten dat jQuery een JavaScript-bibliotheek is, die wordt gebruikt in html-code en de reden voor het gebruik van jQuery in een html-code wordt gebruikt om eenvoudig UI-componenten (gebruikersinterface) te maken of te ontwikkelen door javascript. Dus met behulp van jQuery kunnen we onze website niet alleen aantrekkelijker en ook interactiever maken. De voortgangsbalk is ook een van de jQuery UI-componenten, die wordt gebruikt om de status van de taak of het proces in procenten weer te geven.

We kunnen de voortgangsbalk in twee vormen weergeven, zoals 'voortgangsbalk bepalen' en 'onbepaalde voortgangsbalk'.

  1. Bepaal de voortgangsbalk - Bepaal de voortgangsbalk die we gebruiken in een scenario waarin we de exacte voortgang of status van de taak kunnen weergeven. Bijvoorbeeld het aantal verzonden bestanden, het percentage van de gegevenskopie, het percentage van de bestandsdownload, enz. Omdat de voortgangsbalk bepalen de voortgang in het formulieraantalpercentage kan weergeven, bijvoorbeeld 54%, of de regel het formulier van links naar rechts vulde.
  2. Onbepaalde voortgangsbalk - Onbepaalde voortgangsbalk die we gebruiken in een scenario waarin de exacte voortgang of status van de taak onbekend is of niet kan worden bepaald. We kunnen bijvoorbeeld geen voortgang bepalen wanneer het verzoek om verbinding te maken met de server doorgaat.

Syntaxis van de methode progressbar ()

De methode progressbar () kan in twee vormen worden gebruikt:

  • $ (element, cont). voortgangsbalk (optie) methode
  • $ (element, cont). voortgangsbalk ("actie", params) methode

Het element waarvoor we de voortgang moeten beheren, kunnen we $ (element, cont) toepassen. voortgangsbalk (opt) methode op het html-element en beheerd in de vorm van een voortgangsbalk. Overwegende dat optie een parameter is die wordt gebruikt voor het doorgeven van de verschillende waarden om aan te geven hoe de voortgangsbalken moeten worden weergegeven en weergegeven. Bijvoorbeeld $ ("#elementid") .progressbar ((waarde: 30)), hier is waarde een optie en 30 is de opgegeven waarde voor waardeoptie.

Op dezelfde manier kunnen we niet alleen een optie doorgeven, maar we kunnen ook meer dan één optie doorgeven, alleen elke optie gescheiden door de komma, zoals hieronder aangegeven -

$ (selector, context) .progressbar ((option1: value1, option2: value2… ..));

De verschillende opties die we kunnen doorgeven aan de voortgangsbalk worden hieronder gegeven -

  • uitgeschakeld - De optie uitgeschakeld indien ingesteld op waar, schakelt de voortgangsbalken uit en onwaar is een standaardwaarde van uitgeschakeld.
  • max - met de optie max wordt de maximale waarde voor een voortgangsbalk ingesteld. De standaardwaarde van het maximum is 100.
  • waarde - De waardeoptie die wordt gebruikt om de beginwaarde van de voortgangsbalk in te stellen. De standaardwaarde van waarde is 0.

Voorbeelden van JQuery Progress Bar

De standaardfunctionaliteit van de methode progressbar () -

Laten we vervolgens enkele voorbeelden op de voortgangsbalk starten om de functionaliteit ervan te begrijpen. Eerst schrijven we enkele voorbeelden om de standaardfunctionaliteit van de voortgangsbalk te bekijken zonder parameters door te geven aan de methode progressbar (). Omdat de voortgangsbalk een element is van de ui jQuery, is de eerste stap het opnemen van de externe jquery-bestanden door het kenmerk src van het element op te geven.

Programma Voorbeeld # 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((
));
));

Dit is de standaardfunctionaliteit van de voortgangsbalk

Uitgang -

Vervolgens gebruiken we de waardeoptie en geven deze 40 door, wat aangeeft dat de voortgang 40% in de voortgangsbalk is zoals aangegeven in de onderstaande code -

Programma Voorbeeld # 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
));
));

Dit is de standaardfunctionaliteit van de voortgangsbalk

Uitgang -

Vervolgens stellen we de max en waarde-opties in op respectievelijk 400 en 40% in de voortgangsbalkmethode van JqueryUI.

Programma Voorbeeld # 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;
)

Dit is het voorbeeld van de voortgangsbalk voor max = 400 en waarden = 40%

Uitgang -

De voortgangsbalk begint van links naar rechts te vullen en stopt wanneer 400 is bereikt. Als er geen waarde is voor de optie max, stopt de vulling alleen aan de rechterkant.

Het element waarvoor we de voortgang moeten beheren, kunnen we de methode $ (element, cont) .progressbar ("action", params) op het html-element toepassen om een ​​actie op de voortgangsbalk te beheren en uit te voeren. in de vorm van een voortgangsbalk. De actie is een parameter die is opgegeven als een tekenreeks in het eerste argument. Bijvoorbeeld $ ("#elementid") .progressbar ('uitschakelen'), hier uitschakelen optie uitschakelen van de voortgangsbalk.

Enkele van de acties die kunnen worden doorgegeven in de methode $ (element, cont) .progressbar ("action", params) worden hieronder gegeven -

  • vernietigen - De vernietigingsactie die wordt gebruikt om de voortgangsbalkfunctionaliteit van een element volledig te verwijderen en terug te keren naar de pre-init status van een element. Het is een nul-argumentatiemethode.
  • uitschakelen - De actie uitschakelen schakelt de voortgangsbalkfunctionaliteit van het element uit. Het is een nul-argumentatiemethode.
  • enable - Met de actie enable wordt de voortgangsbalkfunctionaliteit van het element ingeschakeld. Het is een nul-argumentatiemethode.
  • option (option) - De optie option (option) gebruikt om waarde uit het opgegeven element te halen. Het accepteert één argumentoptie, wat een String is.
  • optie - De optie actie die wordt gebruikt om een ​​voortgangsbalkoptie te krijgen in de vorm van sleutel: waardeparen. Het is een nul-argumentatiemethode.
  • option (optie, waarde) - De optie (optie, waarde) actie gebruikt om de optiewaarde van de voortgangsbalk in te stellen die aan de opgegeven optie is gekoppeld.
  • option (options) - De optie option (options) gebruikt om een ​​of meer opties voor de voortgangsbalken in te stellen. Het accepteert één argumentoptie, die een kaart is voor paren van optie-waarden.
  • waarde - De waardeactie die wordt gebruikt om de waarde van opties te krijgen. De waarde geeft het percentage vulling aan in de voortgangsbalk.
  • waarde (waarde) - De actie waarde (waarde) die wordt gebruikt om een ​​nieuwe waarde in te stellen voor het percentage dat moet worden ingevuld in de voortgangsbalk. Het accepteert een argumentwaarde die getal is.
  • widget - De widgetactie die wordt gebruikt om het element te krijgen waarop de voortgangsbalk wordt toegepast. Het is een nul-argumentatiemethode.

Vervolgens zien we enkele voorbeelden van de voortgangsbalk met enkele acties die hierboven worden vermeld. Laten we het onderstaande programma voor de methode progressbar () bekijken met de actie disable () en option (optionName, value).

Programma Voorbeeld # 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;
)

Dit is het voorbeeld van de voortgangsbalk voor actie Uitschakelen



Dit is het voorbeeld van de voortgangsbalk voor max en waarde actie

Uitgang -

De bovenstaande voortgangsbalk is uitgeschakeld, daarom wordt de voortgang niet weergegeven en de onderstaande voortgangsbalk stelt de optie max en waarde in met enkele waarden, dus de voortgang in de vorm van opvulling wordt van links naar rechts weergegeven.

Voortgangsbalkelement beheer evenementen -

Naast het bovenstaande kan de voortgangsbalk ook door het evenement worden beheerd. De jQuery UI biedt gebeurtenismethode, de gebeurtenis wordt geactiveerd voor een bepaalde gebeurtenis. Enkele van de evenementen die kunnen worden gebruikt om de voortgangsbalk te beheren, worden hieronder gegeven -

  • verandering (gebeurtenis, ui) - Telkens wanneer de waarde van de voortgangsbalk verandert of de voortgang verandert, wordt deze gebeurtenis geactiveerd.
  • compleet (gebeurtenis, ui) - Wanneer de voortgang het einde bereikt of de maximale waarde bereikt, wordt deze gebeurtenis gegenereerd.
  • create (event, ui) - Wanneer een voortgangsbalk wordt gemaakt, wordt deze gebeurtenis geactiveerd.

Schrijf vervolgens enkele voorbeelden van de bovenstaande gebeurtenisactie. Het volgende voorbeeld toont het gebruik van de gebeurtenismethode tijdens de voortgangsbalkfunctionaliteit. Dit voorbeeld toont het gebruik van gebeurtenissen om te wijzigen en aan te vullen.

Programma Voorbeeld # 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;
)

Dit is het voorbeeld van de voortgangsbalk met gebeurtenis



Bezig met laden…

De output van het bovenstaande programma is in de volgorde van uitvoering zoals hieronder weergegeven -

De voortgangsbalk begint van links naar rechts te vullen en stopt wanneer het einde is bereikt.

Conclusie

1. Voortgangsbalken zijn een jQueryUI-element.

2. De voortgangsbalk wordt gebruikt om de status van de taak of het proces te voltooien in procenten.

3. De methode progressbar () kan in twee vormen worden gebruikt:

  • $ (element, cont). voortgangsbalk (optie) methode
  • $ (element, cont). voortgangsbalk ("actie", params) methode

4. De verschillende opties die we kunnen doorgeven aan de methode progressbar () zijn -

gehandicapt

  • max
  • waarde

5. Sommige van de acties die kunnen worden doorgegeven in de methode $ (element, cont) .progressbar ("action", params) zijn -

  • vernietigen
  • disable
  • inschakelen
  • optie
  • optie (optie, waarde)
  • optie (opties)
  • waarde
  • waarde (waarde)
  • widget

6. Het evenement dat kan worden gebruikt om de voortgangsbalk te beheren, wordt hieronder gegeven -

  • compleet (evenement, ui)
  • create (evenement, ui)
  • wijzigen (evenement, ui)

Aanbevolen artikelen

Dit is een handleiding voor de JQuery Progress Bar. Hier bespreken we de JQuery-voortgangsbalkmethoden en -voorbeelden met de syntaxis en uitvoer. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. jQuery-kenmerken
  2. jQuery Ajax-methoden
  3. jQuery-effecten
  4. jQuery-alternatieven
  5. Top 5 soorten boosts met voorbeeldcode
  6. Hoe maak je een ProgressBar in JavaFX?

Categorie:

Software ontwikkeling