Apprenez à créer les fameux menus accordéons avec jQuery Mobile.
Ces menus permettent d’afficher énormément d’information sur un tout petit écran. C’est très pratique pour réaliser un affichage de site Web pour Smartphones ou Tablettes.
Découvrez les options du menu accordion de jQuery Mobile
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer une menu accordion avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur développement facile. Donc ensemble on continue cette série de cours consacrée de jQuery mobile et donc là vous allez apprendre à créer les fameux menus accordéon ou « Accordion » avec jQuery, donc les menus où vous cliquez sur un, ça en ouvre, vous cliquez sur un autre, ça l’ouvre et ça ferme le précédent. C’est très simple de créer des menus accordéons. Ça permet, un menu accordéons, d’afficher énormément d’info sur un tout petit écran, c’est très pratique justement avec les mobile les Smartphones et les tablettes le menu accordéon.
Les menus accordéons.
Comment faire ? Il suffit d’ajouter à la balise data-role = collapsible-set qui va englober les différents éléments de votre menu accordéon, c’est aussi simple que ça.
Je vous montre un petit exemple donc pour afficher un menu déjà sélectionné, il suffit … par défaut votre menu accordéon est fermé si vous affichez la page vous souhaitez afficher un élément ouvert de votre menu accordéon vous ajoutez l’attribut data-collapsed = « false » à la div que vous souhaitez voir affichée. Je vous ai mis un exemple de code source sur un élément du menu qui sera affiché par défaut au chargement de la page.
Vous savez comme le cours précédent sur les menus déroulants et bien un menu accordéon peut contenir tout type de contenu que ce soit à texte, des images, des formulaires, des listes, c’est vous qui choisissez ce que vous mettez dans votre menu accordéon. Donc là, je vous ai mis un exemple tout simple avec l’ajout d’une image dans le menu accordéon donc voilà rien de bien compliqué.
Exemple d’application
Je vous montre l’exemple de code source, ça vous parlera plus. Alors, là vous avez votre menu accordéon, par défaut j’ai dit au module 1 de s’ouvrir donc le module 1 il a par défaut data-collapsed = « false ». Si je le met, aller je vais afficher le module trois ouvert par défaut, je recharge la page, pardon module 2, le module 2 ouvert par défaut le module 2 est ouvert par défaut et il a également une image après pour le module trois on peut imbriquer comme pour les menus déroulant du cours précédent vous pouvez imbriquer des menus accordéons ou un menu déroulant dans le menu accordéon j’ai mis un menu déroulant, ça donne ça, menu déroulant ici à l’intérieur du menu accordéon et ça empêche pas de créer un deuxième menu accordéon si je le souhaitais après c’est vous qui choisissez, il n’y a aucun problème. Voilà avec une image le module quatre est fermé, le module deux s’ouvre, le module deux s’est fermé, le module un s’ouvre. Pareil là j’ouvre un autre élément. Donc c’est très sympa très jolies à l’affichage et vous voyez que le code source relativement simple, collapsible-set pour dire que c’est de menu accordéon, donc si je recharge le module deux ouvert par défaut, le module deux avec une image. Il est possible d’ajouter une image tout simplement, du texte, d’imbriquer un menu déroulant ou un menu accordéon c’est au choix dans un élément du menu accordéon voilà vous mettez autant d’éléments vous voulez dans le quatre il y a également une image.
Votre plan d’actions !
Voilà maintenant c’est à vous de jouer, c’est parti vous avez énormément de cours sur jQuery, jQuery UI, jQuery Mobile pour créer des sites Internet que vos visiteurs adorent. Vous retrouverez le code source sous ce cours vidéo. Si vous avez des questions posez-les directement sous ce cours vidéo et je vous invite, il y a une image juste au-dessus de cette vidéo ou d’attendre la fin de cette vidéo là c’est bientôt fini, elle va se transformer en lien cliquable et vous serez redirigés vers la deuxième vidéo. Donc dans la deuxième vidéo vous allez pouvoir accéder à tous les cours professionnels pour connaître et utilisez le framework jQuery, jQuery UI, jQuery Mobile et dojo, donc vous allez tout savoir donc patienter quelques secondes, la fin de cette vidéo se transforme en lien cliquable et je vous dis à tout de suite dans la deuxième vidéo.
[/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 Exemple de menu accordion avec jQuery Mobile
