Découvrez comment installer des barres de progression loading avec le Framework jQuery UI.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Profitez du Framework jQuery UI pour vos barres de progression loading
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours pour vous aider à utiliser l’extension jQuery UI, dans ce nouveau cours, vous allez apprendre à utiliser les fameuses barres de progression, chargement en cours, très intéressant d’implémenter une barre de progression, ça fait patienter l’utilisateur il sait que votre site n’est pas planté, qu’il y a un chargement en cours, ça peut être dans le cas d’une interrogation, récupération de données via Ajax, ou il y a beaucoup d’informations, des gros fichiers XML, des grosses images à charger, vous pouvez mettre une barre de chargement en cours, avec une animation pour faire apparaître votre élément, donc l’utilisateur sera ravi.
Les barres de progression
Les barres de progression comment ça marche ?
Il suffit d’utiliser une div avec un Id et d’appeler la méthode progressbar avec jQuery UI et ça va vous créer une barre de progression, c’est aussi simple que ça jQuery UI, très simple à utiliser, en 3 lignes de code vous implémentez des widgets assez puissants.
Les options – les barres de progression
Vous avez différentes options, max, value la valeur minimale de la barre de progression, max la valeur maximum de votre barre de progression, disable vous pouvez désactiver la barre de progression.
Vous avez des méthodes, destroy, vous devez les connaitre par cœur à force ces méthodes, je les aient repris dans tous les widgets, destroy, disable, enable, les options, tout est expliqué en français, destroy pour supprimer la barre de progression, disable ça permet de désactiver la barre de progression, enable pour l’activer, je vais vite volontairement parce que vous devez vraiment les connaître par cœur toutes ces options, value ça renvoie la valeur de la barre de progression, value ça permet de définir la valeur de la barre de progression avec le widget on peut récupérer l’objet jQuery avec la barre de progression, définir toutes les options de la barre de progression.
Les événements – les barres de progression
Vous avez l’événement change, lorsque la barre de progression change, sa valeur change, complete lorsque la valeur de la barre de progression a atteint son maximum, et create lorsque la barre de progression est créée.
Les barres de progression
Vous pouvez définir la valeur par défaut de la barre de progression avec l’option value.
Exemple de barres de progression
On voit ensemble un exemple de code source, c’est relativement simple à utiliser, vraiment très simple la barre de progression à utiliser, il suffit tout simplement, d’appeler la méthode progressbar sur une div, vous avez votre div ici, progressbar, et donc vous pouvez bien évidemment définir la taille de votre barre de progression, très simplement et donc vous appelez la méthode progressbar dessus, vous définissez sa valeur, elle part de 0 ici, avec un texte donc que lorsque la barre de progression est créée, vous changerez le texte en attente du chargement, voilà, en attente du chargement, lorsque la valeur de la barre de progression change, vous changez votre texte, et lorsque la barre de progression est finie, l’événement complete, vous changez le texte juste en-dessous. Ça c’est l’écoute des événements.
Un bouton pour démarrer la barre de progression, et start loading ça simule, ça va stimuler le chargement d’un élément dans votre barre de progression, donc on utilise l’option JavaScript set interval, et toutes 33 millisecondes, on va appeler cette fonction et la barre de progression va progresser de 1 en 1, voilà la barre de progression progress, vous voyez la progression du chargement, chargement terminé, l’image s’affiche tout simplement.
Dès que le chargement est terminé, ici, on doit avoir une fonction de call back sur la barre de progression quelque part, ici, chargement terminé, on affiche l’image, bien évidemment, pour charger un fichier via Ajax et faire progresser la barre de chargement, ici ça va charger un chargement de fichier via Ajax, le fichier se charge et à la fin l’utilisateur est informé et voit l’affiche de l’image.
Votre plan d’actions !
Le widget barre de progression est très simple à utiliser, vous avez vu, il y a trois lignes, j’exagère, il y a quelques lignes de code pour l’implémenter très facilement, si vous avez des questions posez-les directement sous ce cours vidéo, comme d’habitude sur Développement Facile, directement sous ce cours vidéo vous retrouverez le code source complet et commenté en téléchargement comme ça vous pouvez l’utiliser dans vos sites internet, je vous invite à regarder maintenant la deuxième vidéo pour aller plus loin avec les frameworks jQuery UI, les frameworks Dojo, l’extension jQuery UI et plein d’autres bonnes surprises, je vais vous accompagner personnellement pendant quatre mois, tout est dans la deuxième vidéo, vous avez une image vidéo 2 juste au-dessus, un lien juste en dessous, rendez-vous dans la deuxième vidéo et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple loading jQuery UI
Et voici un exemple de code source pour créer des barres de progression avec le Framework jQuery UI.
Téléchargement du code source Exemple de barres de progression avec jQuery UI
