JQuery UI - Barres de progression

Table des matières
Il existe différents éléments dans les sites Web modernes qui ont différentes fonctionnalités et qui rendent les tâches spécifiques sur un site Web simples et encore plus frappantes et agréables à l'œil, rendant la navigabilité du site et la convivialité fournie à l'utilisateur extrêmement optimales.
Barres de progression
Les barres de progression sont chargées d'afficher la progression d'une tâche telle qu'un transfert ou un téléchargement de fichier, un téléchargement d'informations, etc.
La méthode progressbar()
La méthode barre de progression () déclare qu'un élément de la HTML il doit être géré et traité sous la forme d'une barre de progression. Ses options sont un objet qui spécifie son comportement et son apparence.
La méthode barre de progression () il peut être utilisé de deux manières :
• $ (sélecteur, contexte) .progressbar (options)
• $ (sélecteur, contexte) .progressbar ("action", paramètres)
Voyons un exemple de son utilisation :
  • Nous incluons d'abord les fichiers nécessaires, les bibliothèques de jQuery aussi bien que CSS:



  • Nous ajoutons quelques styles pour les étiquettes et la barre en tant que tels :

  • Nous instancions notre méthode barre de progression () Nous l'associons à un conteneur et ajoutons en plus quelques événements pour détecter quand l'upload ou le transfert est en cours et enfin quand il est terminé :

  • Enfin, nous ajoutons notre code HTML et les étiquettes où s'affichera notre barre de progression :


Chargement…

L'implémentation de notre code ressemblerait à ceci dans le navigateur :

Enfin, nous laissons ici le code complet pour que vous puissiez le tester par vous-même, sans oublier que nous pouvons essayer différentes options, événements et même styles pour notre barre de progression.




Barre de progression de l'interface utilisateur jQuery - Étiquette personnalisée

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







Chargement…

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave