Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Implémenter des accordéons

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez utiliser les bibliothèques jQuery et jQueryUI. Il s'agit de créer des accordéons sur votre page web.

Transcription

Pour le second exemple, je vous propose d'utiliser une bibliothèque JavaScript externe en l'occurrence, une bibliothèque qui s'appelle jQuery UI, pour jQuery « User Interface », il s'agit d'une bibliothèque qui utilise jQuery pour ajouter toute une série d'éléments d'interaction et d'éléments visuels à nos pages. Alors, que peut-on ajouter ? On peut ajouter un « Datepicker », vous allez voir ce que c'est, quand je clique dans le champ, j'ai un petit calendrier qui apparaît, vous avez certainement déjà vu cela. Je peux également ajouter des barres de progression, ou des barres comme ceci, ou des « downloading dialogue », donc quand je clique sur le bouton, ici, vous voyez une barre qui m'indique la progression d'un téléchargement. Tout cela fait partie de jQuery UI. Alors, ce que nous allons utiliser, c'est l'accordéon, c'est une petite interaction, qui est ici, comme ceci, qui me permet d'afficher ou de masquer différentes sections de mon document, il y a une section qui est affichée à la fois, et pour passer de l'une à l'autre, vous voyez que j'ai une petite animation assez sympathique. Je vous invite à regarder les autres interactions possibles dans la bibliothèque jQuery UI, c'est quelque chose qui est très utilisé, vous allez, certainement, reconnaître des choses que vous avez déjà vu, et n'hésitez pas à utiliser cela, vous-même, dans vos pages. Alors, voici la page avec laquelle je vais travailler, je vais décider que je vais changer en accordéon cette partie-ci de la page, c'est donc à chaque fois que je vais cliquer sur un titre que je vais révéler le paragraphe qui correspond. Alors, comment réaliser tout cela ? Eh bien, je vais retourner dans le code HTML, et vous remarquez que, dans le code HTML de cette page, tout à la fin, j'ai déjà été insérer les bibliothèques. Je vais d'abord chercher la bibliothèque jQuery, je vais ensuite chercher la bibliothèque jQuery UI, et puis, ensuite, je vais charger mon JavaScript à moi. Remarquez que j'utilise le CDN de Google pour aller chercher les bibliothèques. Alors, il est très important de charger les bibliothèques dans cet ordre. D'abord jQuery, ensuite jQuery UI qui a besoin de jQuery pour fonctionner, et puis mon script à moi qui a besoin de jQuery UI, lui-même, pour fonctionner. Alors, je vais préparer un petit peu ma page, je vais repérer la section que je veux transformer en accordéon, elle commence ici, donc je vais l'encadrer d'un « div », je vais donner un identifiant à ce « div », je vais l'appeler « accordion ». Je ne suis pas obligé d'appeler cela « accordéon », ici, ça a du sens, mais ne pensez pas qu'accordéon est un mot magique, ici, qui va tout faire marcher tout seul, je peux appeler ce « div » exactement comme je veux, C'est simplement parce que « accordéon » fait du sens, et je vais fermer ce « div », ici, juste à la fin de la section que je veux transformer en accordéon. Maintenant, à l'intérieur de cette section, de ce « div accordéon », chaque paragraphe doit lui-même être entouré de son propre « div », ce que je vais faire ici, donc je vais prendre, ici, ce « div » qui se ferme et le mettre ici, dans le fond, et je vais faire la même chose avec les différents autres paragraphes, donc, je vais simplement copier-coller, voilà, et enfin, pour le paragraphe qui est ici également. Ensuite, je vais devoir laisser mon utilisateur cliquer sur les titres, les titres H3 qui sont associés à chacun des paragraphes. Donc, pour laissez mon utilisateur cliquer sur cet élément, je vais utiliser la balise « a » de l'HTML, que je vais ouvrir et fermer, bien évidemment, et je vais faire un lien qui va nulle part, c'est-à-dire dont l'« href » est égal à ce symbole « # », ici, donc je vais rapidement faire cela pour chacun de mes titres, j'ai un a qui s'ouvre ici, un a qui s'ouvre ici et un a qui s'ouvre ici, et enfin, je vais maintenant refermer mes balises « a », je vais copier et coller tout cela, donc j'ai un a qui se ferme, un a qui se ferme et un a qui se ferme. Voilà, ma page est prête, il ne reste plus qu'à mettre en place le JavaScript et, rassurez-vous, ça va être très simple, donc, dans « script.js », vous voyez que j'ai déjà cet élément « window.onload», alors, que vais-je faire ? Je vais rechercher mon élément que j'ai appelé « accordion », rappelez-vous que, pour cela, j'ai jQuery qui est disponible, donc je vais utiliser la méthode jQuery, pour ceci, la méthode jQuery qui utilise les sélecteurs de type CSS, donc je vais rechercher « accordion », il faut bien être certain que ce que vous écrivez, ici, c'est exactement la même orthographe que ce que vous avez écrit ici. Pour être certain, je vais même copier coller, comme cela, je suis sûr, voilà. Et puis, dans jQuery UI, pour démarrer tout cela, j'ai une méthode, tenez-vous bien, qui s'appelle tout simplement, « .accordion ». Comme ceci. Et voilà, c'est fait. Donc, je sauvegarde le tout, je vais revenir dans mon navigateur, je rafraîchis ma page, et vous voyez que maintenant, j'ai une section qui est affichée, et que les autres sections s'affichent uniquement quand je clique sur le titre qui correspond à la section. Remarquez également que j'ai une seule section qui est affichée à la fois, il fait cela de manière automatique, c'est la bibliothèque jQuery UI, ici, en pleine action. Alors, évidemment, je pourrais ajouter du CSS, à tout cela, je pourrais également ajouter une série d'options à cet accordéon, je vous renvoie, pour cela, à la bibliothèque jQuery UI, et, ici, à la documentation de cet accordéon, pour vous-même, améliorer cette page, et ajouter une série d'option à votre accordéon, voire même, ajouter à cette page d'autres interactions de jQuery UI.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !