Antoine Guiral : apprenti du web 2.0 : [tuto jquery] cadres extensibles animés avec jquery

[tuto jquery] cadres extensibles animés avec jquery

Ecrit par Antoine le 15 janvier 2008

Un petit tutoriel rapide pour terminer les explications par rapport à mon cv en ligne. Je vous conseille de lire le tutoriel précédent sur les cadres extensibles en xhtml/css.

JQuery kezako?

JQuery est un framework javascript. Il en existe d’autres comme MooTools [en] ou script.aculo.us [en]. Cela rajoute une couche javascript qui permet de manier les éléments DOM plus facilement. Ils fournissent aussi une quantité impressionnante d’effets très “2.0” ou vous permettent d’utiliser AJAX de manière très simple.

Télécharger JQuery et faire le “linkage”

Allez vite télécharger la dernière version stable de JQuery sur le site officiel. Ensuite ouvrez votre editeur préféré et ouvrez le fichier html sur lequel vous voulez tester cet effet (si vous avez fait le tutoriel précédent servez vous en ;-p).

Placez vous entre vos balises <head> et </head> et faites le lien entre votre fichier html et votre fichier javascript qui contient JQuery :

<script type="text/javascript" src="path/to/jquery.js"></script>

Puis entre votre fichier html et le fichier composé de vos fonctions et/ou effets maisons basés sur JQuery (ou pas!) :

<script type="text/javascript" src="scripts/script.js"></script>

Nous sommes parés pour rentrer dans le vif du sujet!

La base

Le sélécteur universel JQuery : “$“. “$” désigne un objet JQuery étant lui même un ensemble d’éléments DOM.

Par exemple : $(”a”) désigne tout les liens présent dans le document. Un autre exemple plus “CSS” : $(”.ma_class”) retourne tout les éléments auxquels on a affécté la classe CSS ma_class. Nous allons donc accéder aux éléments que nous voulons animer grâce à ce sélécteur.

La méthode animate

Animate est une méthode JQuery. C’est à dire qu’une fois un ensemble d’éléments séléctionné on va leurs affecter cette méthode. Cette affectation ce fait avec le “.” : $(”mes_elements”).ma_methode();. Cette méthode peux prendre 4 arguments. Dans notre cas nous n’en utiliserons que 2 : le premier pour les attributs CSS que nous voulons modifier, le second pour la vitesse à laquelle s’executera l’effet.

Le gestionnaire d’événement

Vous pouvez déclancher vos effets sur plusieurs événements. Dans ce tutoriel nous utiliserons le click qui se traduit par la méthode : “.clic()”. Pour mon cv j’utilise la méthode “.mouseover” pour faire bouger mes 3 cadres au passage de la sourie sur l’un d’eux.

Le code pour un seul cadre

$("#L").click(function(){
$("#L").animate({width: 300,left:300,top:190}, "fast");
$("#B").animate({height: 130}, "fast");
});

Commentaire 1 : les effets seront déclanchés sur un clic sur l’élément “#L”. Le premier sélécteur JQuery est donc utilisé pour déclencher l’événement.

Commentaire 2 : on utilise ensuite une fonction anonyme. C’est juste la création d’une fonction temporaire qui n’a pas de nom. On l’a créé juste pour l’occasion et elle ne sera pas réutilisable à un autre endroit dans le code.

Commentaire 3 : on sélectionne ensuite les éléments que l’on veux animer grâce à un nouveau sélécteur JQuery. Dans notre cas nous sélectionnons le cadre le plus externe $(”#L”) pour l’élargir (ainsi tous les div plus “internes” prendront toute la largeur qu’on leur donne ce qui placera nos bordures correctements) en passant comme premier arguments à .animate() : {width:300,left:300,top:190}. Cela à pour effet de passer la largeur de l’élément séléctionné à 300, puis de positionner le cadre à 300 px du bord gauche de la fenêtre et 190 px du bord supérieur de la fenêtre. Le second argument définit la vitesse de l’animation, ici : “fast”. On aurais pu mettre un chiffre en milliseconde (par exemple 300). La même opération est effectuée sur le div le plus “interne” pour forcer l’étirement du cadre en hauteur.

Commentaire 4 : les attributs CSS composé comme “margin-left” s’ecriront “marginLeft” quand ils seront attributs de .animate().

Voila c’est fini! Surtout n’hésitez pas à me poser vos question. Et j’attend avec impatience les url’s de vos réalisations!

A bientôt!

Partagez cet article :