JQuery UI - Voortgangsbalken

Inhoudsopgave
Er zijn verschillende elementen in moderne websites die verschillende functionaliteiten hebben en die specifieke taken op een website eenvoudig en nog opvallender en aantrekkelijker maken, waardoor de navigeerbaarheid van de site en de bruikbaarheid voor de gebruiker uiterst optimaal is.
Voortgangsbalken
Voortgangsbalken zijn verantwoordelijk voor het weergeven van de voortgang van een taak, zoals een bestandsoverdracht of upload, informatie-upload, enz.
De voortgangsbalk () methode
De methode voortgangsbalk () verklaart dat een element van de HTML het moet worden beheerd en behandeld in de vorm van een voortgangsbalk. De opties zijn een object dat zijn gedrag en uiterlijk specificeert.
De methode voortgangsbalk () het kan op twee manieren worden gebruikt:
• $ (kiezer, context) .voortgangsbalk (opties)
• $ (kiezer, context) .voortgangsbalk ("actie", parameters)
Laten we een voorbeeld van het gebruik ervan bekijken:
  • Eerst nemen we de benodigde bestanden op, de bibliotheken van jQuery net als de CSS:



  • We voegen enkele stijlen toe voor de labels en de balk als zodanig:

  • We instantiëren onze methode voortgangsbalk () We associëren het met een container en voegen bovendien enkele gebeurtenissen toe om te detecteren wanneer de upload of overdracht aan de gang is en ten slotte wanneer deze is voltooid:

  • Eindelijk voegen we onze code toe HTML en de etiketten waar onze voortgangsbalk wordt weergegeven:


Bezig met laden…

De implementatie van onze code zou er als volgt uitzien in de browser:

Ten slotte laten we hier de volledige code achter zodat u deze zelf kunt testen, zonder te vergeten dat we verschillende opties, evenementen en zelfs stijlen voor onze voortgangsbalk kunnen proberen.




jQuery UI-voortgangsbalk - Aangepast label

href = "http: //code.jquery.c… /jquery-ui.css" />







Bezig met laden…

Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven

U zal helpen de ontwikkeling van de site, het delen van de pagina met je vrienden

wave wave wave wave wave