Dans ce cours en ligne, nous allons apprendre à manipuler des éléments HTML en les faisant apparaître ou disparaître par exemple en fondu ou bien sous forme de slide.
La manipulation du DOM (Document Object Model) sera totale et elle nous permettra de rendre nos pages web de plus en plus attractives pour nos visiteurs !
Toutes ces connaissances acquises depuis le début de cette formation sur l'apprentissage du langage jQuery de manière simple, rapide et efficace, nous permettent de pouvoir manipuler le moindre détail de nos pages web, les rendant ainsi très réactives et super agréables.
Nous pousuivrons l'enrichissement de notre documentation personnelle sur jQuery et nous terminerons ce chapitre, par la réalisation d'un exercice concret.
Cet exercice pratique consiste à faire apparaître un menu de navigation interactif. Au clic du menu nous ferons apparaître un nouvel écran grâce à un effet de transition en fondu.
Je mets les codes de cet exercice, à votre disposition.
Table des matières de cette formation jQuery (durée : 1h34m)
-
Les méthodes de manipulation
- Découvrir la méthode replaceWidth 00:05:37
- Découvrir la méthode wrap 00:03:13
- Découvrir la méthode addClass 00:04:26
- Découvrir la méthode removeClass 00:02:44
- Découvrir la méthode width 00:03:30
- Découvrir la méthode height 00:02:44
- Découvrir les méthodes innerWidth & innerHeight 00:04:31
- Découvrir les méthodes de type toggle 00:07:34
- Découvrir les méthodes fadeIn & fadeOut 00:07:09
- Découvrir la méthode fadeTo 00:04:36
- Découvrir les méthodes slideDown & slideUp 00:04:14
-
Application
- Mettre en place le code HTML 00:07:46
- Mettre en forme le général 00:10:21
- Terminer la mise en forme 00:11:41
- Manipulation de la Nav 00:04:57
- Apparition et disparition des boîtes 00:06:45
-
Pour la prochaine fois
- Pour la prochaine fois 00:02:56
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Super tuto. Ce 8ème volet de jQuery facile va beaucoup me servir dans l'amélioration de mes pages. J'ai même mis une classe active aux deux "liens" de la nav. Trop bien :-) Je me sens plus à l'aise à présent. Sans doute parce que c'est encore frais à mon esprit. En avant pour le 9ème module sur les animations.
-
Quel imagination ce Carl. Bravo mec
-
Le sodium n'a pas réagi trop violemment, et je reste d'attaque pour la suite...
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Que contient le fichier source ?Le code source de l'exercice d'application ainsi que notre documentation jQuery.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés