Vous allez apprendre les options avancées pour personnaliser le menu accordéon avec le Framework jQuery UI.
Par défaut, l’accordéon est présenté avec le premier panneau en position ouverte. Il est possible de l’afficher de façon refermée.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Utilisez les possibilités du Framework jQuery UI pour votre menu accordion
Bonjour à tous et bienvenu sur Développement Facile.
On passe à la suite du cours sur le menu accordion, dans le cours précédent vous avez appris à créer votre menu accordion avec jQuery UI, vous avez vu que c’était extrêmement simple, je ne vais pas compter le nombre de lignes de code, mais en trois, quatre lignes de codes c’est très facile à implémenter.
Menu accrodion
Là, voici la deuxième partie du cours, on va aller un peu plus loin dans l’apprentissage du menu accordion, par défaut le menu accordion affiche le contenu du premier panneau, vous pouvez, en utilisant une option, définir le premier panneau qui sera ouvert, il suffit d’utiliser l’option active suivie de l’index, sachez que les panneaux partent de l’index zéro pour le premier panneau, l’index 1 pour le deuxième panneau, il y a un décalage, vous spécifiez l’index dans l’option active, ça va, à l’ouverture de la page, activer le panneau que vous avez choisi. Excusez-moi, je me suis enrhumé, désolé et donc vous pouvez également utiliser l’option collapsible à true pour pouvoir utiliser l’ouverture et la fermeture des panneaux.
Désolé, le changement des icônes par défaut passe par l’option icons, en utilisant l’option icons vous pouvez ajouter des icônes dans le titre de votre menu accordion, c’est très pratique, et il y a deux icones, une icône que le menu accordion, le menu est activé, et quand il est désactivé, vous pouvez choisir les deux icones, bien évidemment. C’est très utile pour informer l’utilisateur du menu qui est ouvert, les icônes je vous conseille d’utiliser au maximum les icônes, c’est très visuel, ça parle à tout le monde une icône bien choisie, c’est mieux. Une image, vos mieux que 1000 mots, vous connaissez surement cette expression.
Vous avez l’option heightStyle avec trois valeur possibles, auto, fill, et content, en fonction de l’option soit la hauteur change, ou s’adapte en fonction du contenu ou alors ça met une barre de défilement, bien évidemment, je vous invite à tester ces options, le fait de le voir ce sera beaucoup plus parlant, de toute façon je vais vous montrez dans le code source ce que ça donne.
Et par défaut le contenu d’un item se déploie au clic, mais avec l’option event vous pouvez choisir le déploiement, l’affichage du contenu de votre menu accordion au survol de la souris, c’est ce que nous allons voir tout de suite dans l’exemple de code source.
Exemple de menu accordion
Là c’est pour créer le bouton, vous allez choisir le panneau à ouvrir, avec le bouton ouvrir, et l’index, ça va vous permettre de bien comprendre que les index partent à zéro, pour le premier panneau etc. Avec les options, on va donner des icônes donc deux icônes différentes, une icône ouverte quand le panneau est ouvert, et une icône fermée, ça part avec la flèche qui descend, et la flèche sur le côté qui indique la direction droite, c’est pour ouvrir le panneau sur le clic, ça ouvre le panneau définit, voilà, ici, on lui donne le numéro de l’option, et HautClic sur le bouton activate, bouton activate, on va dire à l’accordion d’activer le panneau que l’on a choisi, on récupère parseint, c’est pour convertir une chaine de caractères, du casting chaîne de caractères vers un number, c’est du casting, il y a un cours sur Développement Facile qui vous explique le casting dans les différents langages, c’est à peu près tout le temps la même chose, je vous conseille d’aller consulter cette vidéo sur le cast, ça s’appelle le cast, string en number, number en string, etc., Float en number, donc parseint c’est une option de casting, et donc qu’est-ce que ça donne ?
Je vais mettre … est-ce que j’ai mis l’option, ça peut fermer l’accordions par défaut, je vous ai mis différentes options, par exemple avec l’option event, lorsque l’on va utiliser la souris au lieu, là c’est sur un clic, voilà, ça vous affiche le contenu avec la barre de défilement, vous pouvez afficher l’onglet numéro quatre en fait, si je mets un chiffre qui n’existe pas, il ne sait pas quoi faire, le premier onglet, et là je recharge la page, et vous voyez au survole de la souris c’est pas très utile, ça gène plus l’utilisateur qu’autre chose, je ne vous conseille pas de l’activer, par défaut, je ne mets pas toujours l’onglet numéro trois, afficher par défaut, si je veux afficher un autre onglet je clique sur ouvrir. jQuery UI il est comme je vous le dit à chaque cours, il est très simple à utiliser il y a très peu de code, regardez, très peu de code, le code est commenté, très simple à utiliser.
Votre plan d’actions !
Maintenant c’est à vous de jouer, sous cette vidéo, comme d’habitude, vous retrouverez en téléchargement sur Développement Facile, le code source complet et commenté que vous pouvez télécharger et utiliser dans vos applications. Si vous voulez aller plus loin, que je vous accompagne pendant quatre mois, pour apprendre à utiliser jQuery, jQuery UI, Dojo, tout ça dans le détail à travers une multitudes d’applications, il y a plus de 60 cours pour vous aider à maitriser ces Frameworks et à développer plus rapidement vos sites internet, qui soient beaucoup plus performants et compatible avec les navigateurs que ce soit sur tablette, smartphone, IPad, IPhone, les Motorola, Androids etc. Je vous conseille de cliquer, il y a un lien, une image au-dessus, vidéo deux, un lien vidéo deux, pour aller plus loin, et en attendant, je vous dis à très bientôt pour le prochain cours sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple du menu accordion
Retrouvez le code source commenté pour créer votre propre menu accordéon.
Téléchargement du code source Menu accordéon avec le Framework jQuery UI
