Découvrez comment en quelques lignes de code seulement vous serez capable de créer un menu déroulant.
jQuery Mobile vous propose une implémentation très simple et très rapides des menus déroulants dans votre code HTML 5
Vous pourrez en plus l’adapter à n’importe quoi, comme des images, du texte, etc. cliquez sur votre menu déroulant pour voir ce que vous voulez s’afficher en dessous.
Tout est dans la formation ci-dessous
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment créer un menu déroulant avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur développement facile, donc encore un nouveau cours consacré au framework jQuery mobile et cette fois vous allez apprendre très simplement à créer des menus déroulants avec jQuery mobile donc en quelques lignes de code seulement vous serez capables de créer un menu déroulant, vous cliquez et le contenu texte affiche juste en dessous donc une image du texte ce que vous souhaitez donc ça reprend des balises HTML 5 que vous avez l’habitude, avec des attributs supplémentaires
Les menus déroulants
Donc vous avez un bouton avec un texte et du contenu qui s’affiche des que l’utilisateur clique sur le bouton, donc il faut que vous créiez une div avec l’attribut data-role = collapsible pour faire l’effet menus déroulants et ensuite vous ajoutez une balise de type qui comprend le texte qui va apparaître dans le bouton et enfin vous ajoutez le contenu texte qui va apparaître une fois le menu ouvert tout simplement. Vous avez un exemple de code qui reprend exactement ce que je viens de vous expliquer, vous avez vu que c’est relativement facile enfin c’est que des choses que vous connaissez en HTML. Il y a juste l’attribut div date-role = collapsible à rajouter c’est attribut data-role tout le reste vous connaissez.
Vous pouvez afficher le contenu texte directement au chargement de la page donc il faut utiliser l’attribut data-collapsed égale false pour dire que le menu est affiché en position ouvert dès que la page est affichée parce que par défaut il faut savoir que le menu est affiché en position fermée, il faut appuyer sur le bouton pour afficher le contenu donc là avec une data-collapsed = false, le contenu texte sera visible dès l’apparition de la page tout simplement. Donc comme je vous l’ai dit un élément de type menu déroulant peut contenir tout type de contenu, du texte, des images, des listes, des formulaires, vous pouvez même imbriquer les menus déroulants les uns dans les autres, donc je vous ai mis un exemple de code source où dans le contenu on a mis une image et à la fin de ce cours je vous montrerais où on imbrique des menus déroulants les uns dans les autres sympa quoi.
Justement on va passer au code source comme ça, bah ça vous permettra de mieux appréhender les choses. Alors bah je vous montre ce que ça donne la, je lance le chargement de la page donc par défaut module deux est ouvert, parce que si je le ferme et que je recharge la page il s’ouvre. Le module un menu déroulant et le module trois qui contient une image donc elle est à la mauvaise taille mais bon c’est pour vous montrer le principe de fonctionnement et qui contient surtout un deuxième menu déroulant je le ferme et je le ré ouvre le module quatre est toujours déroulé donc là je recharge la page module trois avec une image alors comment ça ce code tout ça. Très simple en fait vous avez votre div data-role collapsed pour dire c’est un menu déroulants collapsed, un menu déroulant à l’intérieur d’un autre menu déroulant et votre contenu, donc vous pouvez mettre une image comme il y a ici dans cette balise paragraphe, tout simplement ou sinon un menu déroulant data collapsed égal false donc celui le il sera ouvert par défaut. Voilà c’est aussi simples que ça la création de menu déroulant avec jQuery Mobile.
Votre plan d’actions
Maintenant c’est à vous de jouer, reprenez les exemples de ce cour pour les implémenter dans vos applications mobiles pour tablette, Smartphone. Retrouvez sous cette vidéo le code source complet si vous avez des questions, vous pouvez les poser également sous ce cours vidéo et si vous voulez avec plus loin il y a une image avec un lien où vous attendez la fin de cette vidéo elle va se transformer en lien cliquable et vous avez accès à la deuxième vidéo. Donc dans la deuxième vidéo vous allez voir comment vous pouvez accéder à tous les cours pour jQuery, jQuery UI, jQuery Mobile. Vous aurez tous les éléments en main pour créer des sites Web à la fois sur les ordinateurs de bureau sur les Smartphones les tablettes très rapidement des sites Web puissants. Attendez la fin de cette vidéo elle se transforme en lien cliquable, cliquez dessus et vous serez redirigé sur la deuxième vidéo. Je vous dis à tout de suite sur développement facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple de menu déroulant
Et voici le code source commenté pour créer un menu déroulant avec jQuery Mobile
Téléchargement du code source Exemple de menu déroulant avec jQuery Mobile
