Utilisez le widget menu à onglets avec le Framework JavaScript jQuery UI

Apprenez à utiliser toutes les options du widget menu à onglet de l’extension jQuery UI.

C’est la suite du cours précédent sur le menu à onglet jQuery UI.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez le widget menu à onglets avec le Framework JavaScript jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Dans le cours précédent vous avez appris à créer un menu avec onglets, avec jQuery UI, là c’est la suite, on va aller au niveau supérieur, donc pour créer un menu avec onglets, c’est partit pour voir un peu la suite des possibilités d’utilisation de ce widget avec le Framework jQuery UI.

Menu avec onglets

Vous pouvez modifier l’apparence via une classe CSS pour diminuer la taille de la police, sa marge interne, il suffit d’utiliser la classe 8-76défaut, vous mettez les infos que vous voulez, couleur de la police, couleur de fond etc.
Vous pouvez utiliser la classe CSS jQuery UI-tab-panel, ça permet de modifier les propriétés de style du titre de chaque onglet, la même chose, la couleur de la police, sa taille etc. Vous pouvez modifier très facilement avec cette classe CSS, comme je vous l’ai dit, vous pouvez modifier l’onglet présenté par défaut avec l’option active et vous spécifiez l’index de l’onglet à ouvrir en premier, l’option disable permet de désactiver un onglet et l’option collapsible à true permet de refermer le contenu des objets, vous aurez juste le menu quand vous cliquez ça va ouvrir votre onglet, vous recliquez, ça va refermer votre contenu de l’onglet.

L’option heightStyle ça vous permettre de contrôler la hauteur de chaque panneaux de contenu, il y a trois valeurs comme je l’ai dit, auto, fill, content, et avec la valeur auto, tous les panneaux du contenu comporte la hauteur de celui qui a le plus grand contenu. Ça permet de garder une certaine cohérence graphique, au lieu que ça change tout le temps la taille de la hauteur du panneau, le panneau grade la même taille et le contenu qui est affiché dedans, il y a une scrollbar qui s’ajoute.

Avec la valeur fil, les panneaux possèdent la hauteur mise à disposition par l’élément parent, et la hauteur des panneaux sera tout le temps égale avec une barre de défilement si c’est nécessaire, alors que la valeur content, chaque panneaux ajuste sa hauteur en fonction du contenu, il n’y aura jamais de barre de défilement par contre, le panneau va ajuster sa hauteur tout seul en fonction du contenu.

L’option event comme je vous l’ai dit, ça permet de spécifier l’événement qui déclenchera l’ouverture du panneau, soit au survol de la souris, soit au clic, à vous de choisir.

Exemple de menu avec onglets

Je vous montre un exemple de code source de mise en pratique pour comprendre tout ça, alors on a le contenu de nos onglets, comme tout à l’heure, pour définir la hauteur des onglets, la largeur des onglets, pour modifier le contenu des onglets, donc je vais mettre une police de 12 un peu plus grande, ce sera beaucoup plus sympa, et là on créer notre menu à onglets avec une option collapsible à true, ça permettre de fermer les onglets, par contre je vais le mettre au même endroit, ici, ce sera beaucoup plus clair pour vous, je n’ai pas fait attention quand j’ai fait le code source. Et avec la hauteur, vous avez plusieurs types d’options, l’onglet numéro deux sera activé c’est « Vos Questions », on va désactiver le cinquième onglet « Administration », vos questions, à chaque fois je peux me mettre là, je recharge la page, voilà, vos questions sera l’onglet par défaut ouvert, administration est désactivé et là c’est au clique, la taille reste tout le temps identique, il y a une scrollbar qui se rajoute si c’est nécessaire.
Je peux changer les options par exemple, le mettre sur un mouseover pour ouvrir les onglets, donc voilà, au passage de la souris les onglets s’ouvriront. C’est un coup de main à prendre, je ne sais pas si c’est une bonne idée à implémenter dans votre site, vous pouvez aussi fermer le contenu, de vos onglets, pour fermer le contenu c’est avec collapsible true, bien évidemment à chaque fois vous créez des options vous les mettez ici, vous créez un tableau avec toutes les options de votre onglet, à la fin vous donnez les options a votre menu par onglet, vous pouvez aussi changer la taille, voilà, c’est-à-dire ajustement automatique de la taille, alors voilà, il y a une erreur de code, ajustement automatique de la taille en fonction du contenu, donc le panneau s’ajuste automatiquement, et si vous voulez voir ce qu’il y a dans administration, il suffit de commenter cette ligne et donc l’onglet administration devient disponible. Vous voyez jQuery UI est vraiment très simple à utiliser, c’est très pratique, vraiment très pratique, moi j’adore l’utiliser.

Votre plan d’actions !

Maintenant c’est à vous de jouer, vous retrouverez en téléchargement sous ce cours vidéo le code source complet commenté, donc vous pouvez le réutiliser dans vos applications Web, à vous d’utiliser la puissance du Framework jQuery avec son extension jQuery UI, si vous voulez aller plus loin sachez que au-dessus de cette vidéo ou en-dessous, il y a un liens pour voir la deuxième vidéo, et dans la deuxième vidéo je vous expliquerais comment je peux vous aider pendant quatre mois pour améliorer votre connaissance des Framework jQuery, du Framework Dojo, de l’extension jQuery UI, à travers des applications, un suivi personnalisé, vous aurez toutes les explications, pour ça, il suffit de cliquer sur la vidéo, le liens qui est au-dessus, ou en-dessous cette vidéo, moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple menu à onglets jQuery UI

Et voici le code source commenté du cours sur le Framework jQuery UI.

A quoi ressemble vos menus ?

Montrez-moi dans les commentaires, via une copie d’écran, vos menus à onglets et partagez votre code source javascript.