Apprenez à créer des barres de navigation dans le header ou le footer de vos pages, directement avec le Framework jQuery Mobile.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter une barre de navigation avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble la série de cours dédiés à jQuery Mobile, cette fois, vous allez apprendre à utiliser les barres d’outils, en gros, une barre d’outils c’est un menu à positionner le menu dans votre application Web.
Les barres d’outils
La barre d’entête apparaît au bord supérieur de l’application, tout en haut, en principe elle contient, le header contient le type de la page et le menu de navigation, un ou deux boutons pour faciliter la navigation de l’utilisateur et effectuer différentes actions, par exemple, nous contacter, revenir à l’accueil, pour ajouter une barre d’entête, comme vous le savez, vous pouvez utiliser l’attribut data-role=header et pour créer une barre d’outils, c’est ce que vous allez voir maintenant.
Vous pouvez inclure soit la barre d’outils dans le header, soit dans le pied de page avec toujours l’attribut data-role=footer, et avec la classe ui-bar ça ajoute une marge entre les boutons, un petit espacement, c’est beaucoup plus facile, comme je vous l’ai dit, l’utilisateur il a des gros doigts, il faut laisser de l’espace pour que l’utilisateur évite de cliquer sur le mauvais bouton.
Pour ajouter une barre de navigation, les éléments déjà, il faut savoir qu’ils se répartissent sur toute la largeur de l’écran du périphérique, et un événement de la barre peut être mis en évidence avec la classe ui-btn-active, pour dire, par exemple vous avez un menu accueil, programme, questions, nous contacter, là où est situé l’utilisateur, si il regarde la page formation, le bouton formation sera d’une couleur différente, activé.
Pour créer une barre d’outils ou barre de navigation, ou menu de navigation, le terme que vous souhaitez, il suffit de créer une div avec un attribut data-role=navbar, soit dans la div header, soit dans la div pied de page, footer, c’est aussi simple que ça.
Les barres de navigation sont intégrées dans la page comme les autres éléments c’est pareil, et après si le contenu, par exemple, est plus grand que la hauteur de la page, l’utilisateur doit faire défiler la page pour accéder à la barre d’outils, qu’elle soit en haut ou en bas de votre application web.
Et vous avez l’attribut data-position=fixed, ça veut dire que la barre d’outil sera toujours visible qu’elle soit en haut ou en bas même si l’utilisateur doit faire défiler la page pour voir le contenu, ça peut être aussi pratique data-position=fixed pour laisser le menu visible tout le temps à l’utilisateur. Vous pouvez obtenir le mode plein écran avec l’attribut data-fullscreen=true toujours dans la div de la page, ça permet d’être plein écran.
Les barres de header, d’entête ou de pied de page persistants, c’est une barre qui reste durant la transition entre des pages, l’utilisateur clique sur un lien, la barre reste, il y a une transition de page en page. Déjà une barre persistante, le menu persistant ça doit avoir l’attribut position=fixed, et ensuite à toutes les barres persistantes vous ajoutez la valeur attribut data=valeur afin que jQuery sache que c’est la même barre pour toutes les pages, et il s’assure qu’elle est statique, qu’elle n’applique pas la transition sur la barre, il va utiliser l’attribut data-id, elles ont toutes le même id ces barres de navigation, comme ça, la transition s’effectuera que sur la page et pas sur la barre de navigation. Comme vous le savez, comme je vous ai expliqué dans le cours précédent, jQuery gère les animations slide, slideUp, slideDown, pad, pour les barres de menus.
Le plus simple c’est de voir un exemple de code source c’est ce qui vous parlera le mieux, alors vous avez, je le met en plus petit, le code source, on passe directement à ce qui nous intéresse, la barre en pied de page tout en bas avec la position fixed, c’est-à-dire que si je réduis la taille de la page elle reste toujours affichée, la barre, accueil, description module, nous contacter, ensuite une deuxième barre de navigation, ici, avec donc bien évidemment, il faudra mettre un lien ici, avec des icônes, des boutons icônes, et à chaque fois qu’on est sur une page, évidemment il y aura un lien le contenu changera, pour l’exemple j’ai été assez rapide, je voulais juste vous montrer comment implémenter un menu avec des icônes, et donc ici, il faudra mettre le href qui correspond à la page que vous souhaitez appeler, tout simplement. Et à chaque fois ça va recharger le contenu ici, via Ajax, et vous aurez votre barre.
C’est aussi simple que ça pour créer un menu avec jQuery Mobile.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous de mettre en pratique le contenu du cours, vous retrouverez sous cette vidéo le code source complet, vous pouvez me poser également toutes vos questions sous le cours vidéo, et si vous voulez aller plus loin il y a une image cliquable ici, ou à la fin de cette vidéo, un lien cliquable va s’afficher, ça va vous permettre d’accéder à une deuxième vidéo pour aller plus loin à travers plusieurs cours professionnels pour apprendre jQuery, jQuery UI, jQuery Mobile, le framework Dojo, vous allez aller plus loin dans votre expertise avec le framework jQuery, la fin de cette vidéo, il y a un lien qui apparaît, vous pouvez cliquer dessus et automatiquement vous serez redirigé vers la deuxième vidéo, vers la suite. En attendant je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple barre d’outils jQuery Mobile
Et voici le code source de l’exemple d’une barre de navigation avec jQuery Mobile.
Téléchargement du code source Exemple de barre de menu avec jQuery Mobile
