Et après le cours précédent sur jQuery UI, il est temps d’implémenter la technologie AJAX. Ou le chargement dynamique u contenu des onglets, provenant de fichiers HTML.
Les événements de jQuery UI permettent aussi d’ajouter plus d’interactivité à l’application.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Combinez le menu à onglets et AJAX avec le Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble la série de cours consacrés au plug-in jQuery UI, là c’est la troisième partie, la dernière partie sur la création du menu avec onglets, si vous avez bien suivi les cours précédents, vous savez qu’il reste une partie à aborder, c’est la partie du chargement du contenu via Ajax, via un fichier externe appelé un fichier HTML, un fichier PHP, un fichier XML ou un fichier XSL, comme vous le souhaitez. C’est ce que nous allons voir dans ce cours très rapide.
Menu avec onglets
Comme je vous l’ai dit, il y a les événements jQuery UI qui permettent d’ajouter plus d’interactivité à votre application, c’est ce que l’on va utiliser, et aussi on va charger le contenu de notre onglet via un fichier externe. Au lieu de rediriger vers une ancre, href#onglet1, on va pointer vers un fichier externe, .html, .php, ce que vous souhaitez, et le fichier externe sera chargé automatiquement par jQuery et ça va afficher le contenue dans votre panneau.
C’est aussi simple que ça, bien évidemment comme je vous l’ai dit, jQuery UI propose tout un tas d’animations, on va animer notre menu avec onglet pour apporter un peu plus de dynamisme, de mouvements à votre page, avec les options show et hide, pour réaliser des animations à l’ouverture et à la fermeture d’un panneau, d’un onglet.
Bien évidemment, comme je vous l’ai dit, dans le tout premier cours de présentation, jQuery possède plusieurs thèmes pour vos sites Internet, vous pouvez très facilement créer le thème jQuery UI qui correspond au graphisme de vos sites Internet, il suffit d’aller sur le lien que je vous ai mis ici jqueryui.com/themeroller, et donc vous chargez des thèmes et vous pouvez modifier les couleurs de chaque panneau, textes, le fond des panneaux, mettre des images et vous avez le résultat en direct sur tous les widgets jQuery UI, c’est très pratique.
Exemple de menu avec onglets
Je vous montre un exemple de code source pour que vous puissiez voir à quoi ça ressemble, je passe l’intégration, la création, toutes les options intéressantes sont ici, voilà, notre menu par onglet, on met les titres, et le lien vers les fichiers HTML, le contenu. Ça va vous permettre de modifier très simplement les contenus de votre menu par onglet, et de séparer un peu le code, au lieu d’avoir un grand fichier avec des tonnes de textes de codes, là vous avez séparé, c’est très bien pour la maintenance, les performances de votre application. Le fichier de chargement du menu sera beaucoup plus léger, HTML ou PHP, et il y aura des chargements en direct en dynamique, un affichage beaucoup plus rapide pour votre internaute. C’est aussi simple que ça, puis les animations on utilise des options, avec show un effet, et la durée en millisecondes, vous pouvez choisir votre effet, je vais essayer un autre effet de mémoire, explode pour masquer, voilà, à mais je ne peux pas, c’est en ligne, en fait là, vous avez remarqué c’est hébergé en ligne, ça ne fonctionnera pas, il faudrait que je le reupload et ce n’est pas possible.
Et j’ai rajouté également, deux boutons pour activer l’onglet admin et le désactiver, voilà, tout simplement, je vais essayer de les transformer, de mémoire, en boutons, $# donc il suffit de voir ça, et.button, voilà, au lieu que ce soit, à mais je ne pourrais pas vous montrer non plus. Je vais quand même l’uploader rapidement en ligne pour vous montrer à quoi ça ressemble, de retour, j’ai coupé la vidéo pendant l’upload, ça n’a rien d’intéressant dans le cours, j’ai effectué l’upload ça à transformé les boutons pour activer/désactiver l’administration, qu’est-ce que j’ai rajouté ?
Les animations, le clic sur le bouton désactiver, ici, il y aura un cours sur les boutons pour transformer très rapidement, cette balise en bouton jQuery, bien évidemment, il y a un cours complet là-dessus pour vous aider, et j’envoie disable avec le nom d’onglet, le numéro d’onglet retrouvé avec, c’est quatre pour l’admin.
Alors qu’est-ce que ça donne ?
Je recharge la page, vous avez vos questions, l’animation explode à fonctionnée, avec sload, l’autre animation d’ouverture s’affiche, un explode, je referme l’onglet, ça ne s’éteint pas l’animation explode, pour refermer l’onglet là je peux activer l’onglet admin, il s’ouvre, je peux le désactiver ça fait qu’il n’est plus sélectionnable, je le réactive, voilà, vous avez vu avec jQuery UI en trois lignes de codes, comme ça en live, je vous ai fait en direct la modif, pareil pour l’animation, c’est vraiment très simple à utiliser et très pratique, ergonomique, jQuery UI, je vous conseille de l’apprendre, il n’y a rien de bien compliqué, tout est commenté dans les cours Développement Facile ça va vous permettre de progresser très rapidement.
Votre plan d’actions !
Maintenant c’est à vous de jouer, sous cette la vidéo vous retrouverez en téléchargement le code source mis à jour, complet et commenté, disponible gratuitement sur Développement Facile, à vous de jouer, d’implémenter le menu avec onglets dans vos sites internet et si vous voulez aller plus loin, je vous propose un accompagnement personnalisé individuel, sur quatre mois, il y a un lien au-dessus de cette vidéo, et en-dessous de la vidéo, pendant quatre mois je vais vous dire comment utiliser toutes les facettes de jQuery, jQuery UI, Dojo et il y a également pleins d’autres surprises, je vous invite à regarder la deuxième vidéo pour en savoir plus, et moi je vous dit à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple menu à onglets AJAX / jQuery UI
Retrouvez le code source commenté du menu à onglets avec AJAX.
Téléchargement du code source Menu à onglets AJAX avec jQuery UI
