Et voici un nouveau cours pour utiliser le widget accordion du Framework jQuery UI.
Pour rappel, je vous donne le lien vers le cours précédent sur les menus accordéon.
Cette fois, vous allez apprendre comment implémenter la technologie AJAX pour renseigner le contenu des panneaux, à chaque clic de l’internaute.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Profitez d’AJAX avec votre menu accordion et le Framework JavaScript jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
On passe à la troisième partie du cours pour la création d’un menu accordion et devinez ce qu’il manquait dans le cours, c’est chargement par Ajax.
Menu accordion
Le chargement du contenu de votre menu accordion par un fichier externe, si vous avez suivi le cours sur les onglets, vous allez voir que c’est extrêmement simple d’utiliser Ajax pour charger le contenu de votre panneau.
Codes sources pouvant VOUS intéresser :
Exemple de menu accordion
On passe sans plus tarder, directement au code source, c’est ce qui va vous parler le plus.
Alors vous créez des fichiers HTML avec le contenu de votre tableau, vous pouvez mettre des images ou des fichiers PHP, comme vous voulez, donc vous mettez le contenu d’un panneau du menu accordion, du PHP, des images, toutes les balises que vous voulez, moi j’ai mis le contenu avec un fichier qui s’appelle, un fichier HTML correspondant à chaque contenu et qu’est-ce que ça change ici ?
Ici vous mettez href, le lien vers votre fichier html, vers votre fichier PHP, un message par défaut chargement en cours, et automatiquement jQuery UI va lancer le chargement du fichier HTML ou PHP sur votre serveur pour pouvoir l’afficher. Voilà, là c’est activation du chargement via Ajax, c’est méthode Ajax, à chaque clic, d’ailleurs on peut le regrouper ici, c’est la même chose, je préfère séparer même si c’est la même chose $ fonction, mais je préfère le séparer, c’est beaucoup plus lisible comme ça, en mettant les explications ici, c’est beaucoup plus lisible pour le développeur, pour vous, le but c’est que vous puissiez réutiliser le code source, les cours que je vous donne, très facilement. Qu’est-ce qu’on fait ?
On donne les options du menu accordion, gestion du cache, si vous modifiez le fichier HTML sur votre serveur, à chaque fois il va recharger le contenu du fichier HTML plutôt que d’utiliser le cache du navigateur de l’internaute, c’est à vous de choisir, moi je l’active toujours, et là on utilise l’option activate et en fonction du clic de l’utilisateur sur le lien, on va récupérer le contenu href qui est ici, le lien, et on va faire un get avec l’URL, les données, et on va faire un utiliser l’option HTML pour insérer les données directement dans le bon menu accordion, tout simplement.
Quand on charge la page, par défaut le menu accordion est chargé, je clique, chargement en cours, ça affiche le contenu, ça va chercher le contenu du fichier, UI ça doit être la présentation, il y a un fichier présentation, c’est ça. Si on prend le fichier questions HTML, on charge le contenu du fichier questions, voilà nous contacter, on revient sur le menu questions, il est rechargé à chaque fois, l’administration, questions, formation, présentations, c’est un chargement direct via Ajax en fonction du clic sur le bouton, on peut bien évidemment, refermer le menu en cliquant.
Votre plan d’actions !
Vous avez vu c’est très simple à utiliser, comme d’habitude vous trouverez en téléchargement sous cette vidéo sur Développement Facile, le code source complet et commenté, que vous pouvez réutiliser dans vos applications Internet. Ce que je vous propose au-dessus de cette vidéo, il y a une image, vous allez voir la vidéo 2 maintenant, ou en-dessous, allez voir la vidéo 2 maintenant, je vous conseille d’aller voir la deuxième vidéo, si vous voulez un accompagnement personnalisé pendant quatre mois pour tout savoir sur jQuery, l’extension jQuery UI, le Framework Dojo et bien d’autres surprises qui vous attendent pendant quatre mois, cliquez sur le lien vers la vidéo deux, et moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple accordion jQuery UI
Retrouvez le code source commenté du menu accordion.
Téléchargement du code source Menu accordion couplé avec AJAX
Cliquez ici pour télécharger le code source Menu accordion couplé avec AJAX
Choisissez les prochains cours jQuery UI
jQuery UI possède énormément de widgets personnalisables, je vous propose de choisir les cours qui vous intéresse en utilisant la zone commentaires.