Apprenez comment créer en 2 temps 3 mouvements un menu à onglets avec le Framework jQuery UI.
Le menu par onglets est une option de mise en page qui permet de regrouper l’information d’un site par sujet ou par thème. A chaque clic sur un onglet, le contenu associé est affiché.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez rapidement un menu avec onglets avec le Framework JavaScript jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
On continue la série de cours consacrée au Framework jQuery UI, là vous allez apprendre à faire votre première application, à utiliser votre premier widget, la création d’un menu avec des onglets, vous connaissez sûrement, vous l’avez déjà vu, c’est utilisé par beaucoup de sites internet, l’avantage, vous appuyez sur un onglet, ça affiche un contenu dans un rectangle, vous appuyez sur un autre onglet, ça change le contenu de ce rectangle, donc dans un emplacement qui prend peu de place, vous pouvez mettre énormément d’informations pour vos internautes.
Menu avec onglets
C’est vraiment très pratique pour regrouper toute l’information d’un site par sujet ou par thème. Comme je vous l’ai dit on clique sur chaque onglet, comme vous avez dans Firefox, le système d’onglets, le contenu de la page change.
Vous avez différentes options, enfaites pour chaque concept widget que je vous apprends à utiliser, je vais vous lister toutes les options, comme ça vous aurez tout en vidéo, vous saurez comment ça fonctionne exactement, le widget et vous serez capable de l’installer dans vos sites internet, très facilement et très rapidement. Vous allez avoir accès au code source commenté bien évidemment. Vous avez option active qui permet de définir le premier, à l’affichage de la page, qui permet de définir le panneau qui sera ouvert, vous pouvez utiliser un booléen true ou false, false ça referme tous les panneaux et vous pouvez utiliser un entier 1, 2 ou 3 pour spécifier l’onglet qui sera ouvert par défaut.
Vous avez l’option collapsible, avec la valeur true, le contenu actif peut être fermé, ça vous permet de fermer un contenu,
disabled c’est pour désactiver un onglet en fonction des droits utilisateurs si vous êtes dans une zone d’administration, vous pouvez mettre à true, pour désactiver un onglet bien spécifique avec un index, un tableau soit un booléen, soit un tableau ou vous précisez les numéros des onglets, ça par de zéro, premier onglet correspond à l’index zéro, et vous pouvez désactiver des onglets pour vos utilisateurs.
event ça va déterminer le type d’événement auquel va réagir l’onglet, soit sur un clic, survol de la souris, c’est à vous de voir en fonction de l’ergonomie de votre site internet, onmouseover au survol de la souris ça va activer l’onglet.
HeightStyle c’est la hauteur de chaque panneau de contenu, vous avez trois valeurs possibles :
– Auto ils auront la hauteur de celui qui a le plus grand contenu votre panneau, ce texte.
– fill les panneaux auront la hauteur mise à leur disposition par l’élément parent, vous allez pouvoir régler la hauteur de votre panneau.
– content chaque panneau ajustera sa hauteur automatiquement en fonction de son contenu.
Vous avez hide c’est pour ajouter … Avec jQuery UI, vous avez la chance de pouvoir ajouter des animations très facilement, vous pouvez mettre une animation à la fermeture d’un panneau, vous pouvez le gérer avec plusieurs types, soit un booléen, soit un nombre pour spécifier une durée du fadeOut, soit une chaîne de caractères, slow, fast, soit un objet, une animation pour donner un délai, une durée et easing utiliser bounce par exemple élastique, toujours les durées dans jQuery UI sont en millisecondes.
Vous avez show c’est pour faire la même chose une animation à l’ouverture du panneau cette fois, toujours vous pouvez utiliser un booléen, un nombre, une chaine de caractères, un objet, pour créer une animation de type easing.
Les méthodes
Bien évidemment il y a un cours dédié aux animations, vous allez connaître toutes les animations disponibles dans jQuery, explode, fadein, fadeOut, et toutes les animations de type easing également, j’ai prévu un cours complet dédié là-dessus. Vous avez des méthodes avec les objets destroy c’est pour supprimer la prise en charge des onglets,
disable pour désactiver les onglets,
disable avec un index pour choisir l’onglet à désactiver,
enable pour activer tous les onglets,
enable avec un index pour activer un onglet bien spécifique.
Je vais un peu vite, le but c’est de vous montrer en pratique comment ça marche, ce sera beaucoup plus simple pour vous, pour que vous puissiez comprendre et utiliser le menu sous forme d’onglet dans votre site internet.
Vous avez la méthode load c’est très pratique, c’est ce que je vous conseille de faire, très pratique pour charger le contenu de vos onglets via Ajax, vous allez appeler un fichier html, php, xml, pour récupérer le contenu sur le serveur en direct, et l’afficher pour votre utilisateur, option ça vous permet de connaître les options de l’onglet ou d’affecter des options à un onglet, tout simplement, je vais un peu vite sur cette méthode-là.
refresh ça va permettre de rafraîchir votre menu de tabulation et widget c’est pour récupérer votre widget.
Les événements
Vous avez également des événements comme je vous le disais, très pratique d’écouter des événements sur un onglet, ça permet de savoir ce que fait l’utilisateur et en fonction de ses actions, d’envoyer des événements et de créer du code de votre côté, activate c’est lorsque l’onglet a été activé avec l’animation et que l’animation associée est terminée,
beforeActivate c’est avant l’activation de l’onglet,
beforeLoad l’onglet est sur le point d’être chargé avant de charger le contenu d’un onglet via Ajax,
create c’est lorsque les onglets sont créés par le code jQuery qui déclenche cet événement,
load c’est lorsqu’un objet a été chargé par du contenu externe soit avec ajax, php, xml, etc.
Exemple de menu avec onglets
Je vais vous montrer un exemple de code source, ça va beaucoup plus vous parler, donc là, le résultat de votre onglet, comment ça marche ?
Comme d’habitude ça je ne vais pas y revenir mais ici, et je vous conseille d’utiliser les librairies de l’appli Google, Google Hosted Librarie pour un chargement beaucoup plus rapide et optimisé sur votre site internet, vous créez une div avec un Id onglet, elle est ici, la div, je lui ai défini une largeur, tout simplement, la div et le contenu de chaque onglet.
L’onglet trois avec son contenu, l’onglet deux avec son contenu, bien évidemment vous pouvez mettre comme contenu, une image, du JavaScript, du PHP, de l’HTML, vraiment ce que vous voulez, et les titres de chaque onglets avec le href false.
Voilà votre menu à onglet est créé, après vous pouvez utiliser du CSS, pour modifier la taille de la police, sur le titre de l’onglet, la taille de la police, sur le contenu de l’onglet, par exemple je vais le mettre à 12, là je vais mettre le titre un peu plus gros, je recharge la page, le contenu est de plus grosse taille, et à chaque fois, voilà donc là c’est en chargement par défaut ou la taille des onglets s’adapte au contenu, le contenu change, la hauteur du contenu change. Voilà, allez, 34 lignes de code, vous avez créé votre menu à onglet à utiliser sur votre site internet.
Bien évidemment vous pouvez changer ici … je vous ai mis Google API, vous pouvez bien évidemment changer ici le thème pour un affichage complètement différent.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous d’utiliser jQuery UI, le contenu par onglet, très pratique pour l’utilisateur pour afficher beaucoup d’informations sur le même thème, à vous de mettre en pratique ce cours, si vous avez des questions posez-les directement sous la vidéo, comme d’habitude, sous ce cours vidéo, sur Développement Facile vous retrouverez le code source complet commenté, en téléchargement gratuit, et si vous voulez aller plus loin j’ai créé une formation, expert jQuery Dojo, dans cette formation vous allez apprendre tout jQuery, tous les secrets du Framework jQuery pour les utiliser sur votre internet, pareil pour Dojo vous allez vraiment tout savoir sur le Framework Dojo, utiliser toutes ses capacités et son potentiel, et vous avez également jQuery UI, vous allez tout savoir dans cette formation, elle dure quatre mois, cette formation, avec un suivi individuel et personnalisé, vous avez les informations, un lien au-dessus de cette vidéo ou en-dessous de cette vidéo, pour avoir le détail de la formation jQuery, Dojo expert, je vous dis à très bientôt sur Développement Facile pour le prochain cours sur jQuery.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple menu à onglets jQuery UI
Et voici le code source commenté de la formation.
Téléchargement du code source Création d'un menu à onglets avec jQuery UI
