Avec le widget Accordion, il est très simple et rapide de créer un menu avec le Framework jQuery UI.
La présentation dite en accordéon, regroupe du contenu dans des panneaux séparés qui peuvent être ouverts ou fermés par l’utilisateur, ce qui permet un gain de place en maximisant la quantité d’informations disponibles.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez en 2 temps 3 mouvements un menu accordion avec le Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
Voici un nouveau cours sur le plug-in jQuery UI, là vous avez apprendre à créer un menu accordion comme ça s’appelle, ou accordéon ça dépend quel terme vous utilisez, un menu, vous cliquez, ça déroule, ça fait une sorte d’accordéon.
Menu accordion
Comme je vous l’ai dit, la présentation en accordéon regroupe du contenu dans des panneaux séparés, il suffit de cliquer, ça ouvre, ça ferme, ça fait apparaître le contenu pour l’utilisateur. C’est un gain de place pour afficher beaucoup d’informations pour vos internautes. C’est très simple à utiliser, vous utilisez une div avec un id et vous appelez la méthode accordion dessus.
Il n’y a rien de bien compliqué, comme je vous l’ai dit, $#sélecteur, sélecteur c’est l’Id de votre div .accordion, la méthode accordion comme vous voyez sur votre écran. Je préfère passer un peu plus vite sur la théorie, vous montrez directement le code source, ce sera beaucoup plus intéressant pour vous, en tout cas vous pouvez lire à l’écran ce qu’il y a d’écrit.
Excusez-moi, vous avez différentes options donc les options ressemblent très fortement aux menus par onglets, je vais passer un peu vite sur ces options :
active ça définit le panneau de contenu qui sera ouvert,
animate c’est pour effectuer des animations, ajouter des animations à l’ouverture et à la fermeture d’un panneau.
Vous avez collapsible c’est pour fermer le contenu actif,
disable c’est pour désactiver l’accordéon,
event c’est pour déterminer sur quels type d’événement, un clic ou un survol pour afficher le contenu de l’accordéon.
header, c’est pour préciser la balise d’entête dans le code, du h3, du h2, du h1, h1 je ne vous le conseille pas pour le référencement, vous pouvez utiliser h2,
heightStyle c’est pour contrôler la hauteur de l’accordéon de chaque panneau, vous avez plusieurs valeur c’est comme pour le menu à onglets,
auto, fill, content, c’est exactement la même chose, vous pouvez lire à l’écran, je ne vais pas relire ce qu’il y a écrit sur l’écran, vous pouvez le lire, je vous expliquerais tout ça dans le code, ce sera beaucoup plus simple,
Vous pouvez utiliser des icônes pour les titres de votre menu accordéon nous verrons ça ensemble, bien évidemment, des icônes, celles qui correspondent à votre site.
Les méthodes
Vous avez des méthodes, destroy c’est pour supprimer la prise en charge d’accordion, par jQuery,
Disable c’est pour désactiver l’accordéon,
Enable pour activer l’accordéon.
Vous avez des méthodes pour récupérer la valeur des options, définir la valeur d’une seule option, définir la valeur de toutes les options, tout est expliqué sur l’écran.
Vous avez la méthode refresh comme pour le menu par onglets, ça rafraîchit votre accordéon, ça met à jour,
widget ça permet de récupérer un objet jQuery qui contient l’accordéon, effectuer différentes méthodes ou options dessus, le modifier en direct.
Les événements
Vous avez des événements, activate ça déclenche lorsqu’un panneau est activé et que l’animation associée est terminée,
beforeActivate ça se déclenche immédiatement avant l’activation du panneau,
create cet événement se déclenche lorsque l’accordéon est créé par le code jQuery.
Exemple de menu accordion
Je vous montre un exemple pratique, beaucoup plus intéressant pour vous, c’est ça le menu accordéon, comment ça marche ?
Vraiment très simple, vous avez la div accordéon, la fameuse div accordéon avec le contenu des différents menus de l’accordéon, et vous allez appeler des accordéons avec la méthode accordion, guidé du sélecteur, ici, la méthode accordion, bien évidemment, en CSS vous pouvez personnaliser le type de chaque menu, le contenu de chaque menu, je vais le mettre à 12, pas à 102, le titre, par exemple, à 18, je recharge la page, voyez, et donc quand je cliques, ça affiche le contenu avec une scrollbarre, si il n’y a pas assez de place. Voilà c’est très pratique, très simple à utiliser, je vous remontre ici, par exemple, on peut mettre un titre, avec un hr pour délimiter, voilà, hr ça met la ligne ici, vous avez votre titre contenu d’information avec le hr, pareil ici, contenu de présentation, si je vais dans présentation, avec l’admin, ça permet de faire un sous-titre, vous avez le titre vos formations un petit sous-titre contenu de formations, et le contenu.
Votre plan d’actions !
Voilà à vous de jouer, comme d’habitude sous cette vidéo, vous aurez sur Développement Facile, en téléchargement, le code source complet et commenté que vous pouvez réutiliser dans vos sites internet, et si vous voulez aller plus loin, quatre mois où vous êtes suivis individuellement pour apprendre à utiliser les Frameworks jQuery, l’extension jQuery UI, le Framework Dojo, tout ça dans le détail avec des exercices, des corrigés, pour aller très vite, sachant que toutes les formations Développement Facile sont agréés par l’état, un lien au-dessus de la vidéo ou en dessous de la vidéo, je vous invite à regarder le contenu de la vidéo suivante, juste pour avoir plusieurs indications et voir si vous souhaitez que je vous accompagne pour devenir un expert en développement web, et sinon je vous dis à très bientôt pour le prochain cours sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery UI menu accordion
Et voici le code source commenté du menu accordéon.
Téléchargement du code source Un menu accordion avec jQuery UI
