Tous les articles

jQuery : dansez maintenant !

Par Pierre Bertet

Il est grand temps de publier la suite du précédent article sur jQuery, dans lequel nous abordions le fonctionnement global de la bibliothèque, suivi de la construction d’un objet.

Nous allons maintenant voir ce qu’il est possible de faire à partir de cet objet.

Méthodes de jQuery

L’objet jQuery, comme tout objet, dispose de méthodes. Grossièrement, il s’agit d’actions qu’un objet sait accomplir.
Pour comparaison, si notre objet était une grosse voiture rouge (on vend du rêve sur lesintegristes.net), elle aurait la faculté d’avancer vite.

Ca pourrait donner en français la syntaxe suivante :
Voiture, avance (vite) !

jQuery dispose de la méthode fadeOut(), pour masquer les éléments englobés dans notre objet jQuery avec un effet de fondu certifié « Ouais bah deux pouin zéro. »
– « Hein ? »
– « Ouais bah j’dis c’que j’veux. »

Prenons pour exemple ce petit morceau de HTML, qui ne se doute de rien :

<p class="outi">Lalalala, je me balade dans la forêt...</p>

Nous allons maintenant sélectionner ce paragraphe, et le faire disparaître avec un effet de fondu :

$("p.outi").fadeOut();

Notre objet est $("p.outi"), à qui nous demandons de disparaître ( .fadeOut() ).

La méthode fadeOut() accepte un paramètre qui permet de modifier la vitesse de l’effet : on peut lui passer le temps, en millisecondes, ou les chaînes « slow », « normal » et « fast » :

$("p.outi").fadeOut("slow");
$("p.outi").fadeOut(300);

Il est également possible de passer un deuxième paramètre, appelé callback. Il s’agit d’une fonction qui va être appelée lorsque l’effet sera terminé. Essayons !

// Au chargement du DOM...
$(function(){
	// On sélectionne notre paragraphe
	$("p.outi")
	// On lui applique l'effet fadeOut()
	.fadeOut(
		// Avec "slow" en premier paramètre
		"slow",
		// Et une fonction de "callback"
		// en deuxième paramètre
		function(){$(this).fadeIn("slow");}
	);
});

Dans notre callback, nous utilisons this, qui correspond dans ce contexte à l’objet DOM sur lequel l’effet est appliqué.
Nous le transformons donc en objet jQuery avant de lui appliquer la méthode fadeIn(), qui va comme vous l’avez deviné faire exactement l’inverse de fadeOut(), et faire apparaître de nouveau notre paragraphe.

Les méthodes en chaîne

La plupart des méthodes de jQuery ont une particularité : elles renvoient l’objet jQuery lui-même.
Prenons un exemple, à l’aide de Mozilla Firefox et de son excellent plugin Firebug, qui permet (entre autres) d’afficher n’importe quel objet à l’aide de l’objet console.
Nous allons utiliser la méthode css(), qui permet de modifier une ou plusieurs propriétés CSS des éléments sélectionnés :

$(function(){
	console.log( $("p.outi") );
	// Affiche [p.outi]

	console.log( $("p.outi").css("color", "red") );
	// Affiche [p.outi], la méthode css()
	// renvoie bien notre objet.
});

Ainsi, il va être possible de réutiliser notre objet, pour lui appliquer tout ce que l’on veut.

Pour illustrer ceci, nous allons créer notre premier script « utile ».
Notre client s’est réveillé cette nuit pour noter une idée, qui va à coup sûr donner un énorme avantage technologique à son site sur la concurrence :
– « Le texte de ce paragraphe apparaîtra en… glissant, après avoir survolé le bouton rouge : Survolez-moi ! »
– « Ha »
– « Imaginez la tête du visiteur ! »
– « … »
– « Sinon ça va, vous ? »
– « … O… Oui, ça va. »

Bon, il est temps d’enfiler notre costume de Superman pour trouver une solution accessible avec ça.

Superman
–  » Ca gratte un peu, mais bon.  »

Pour que ce texte reste accessible à tout ce qui n’utilise pas Javascript, il va devoir être masqué au chargement de la page, en Javascript.
Le bouton qui permettra de l’afficher n’ayant aucun sens sans script, nous allons également le générer. Il nous restera ensuite à créer l’effet voulu.
Hop :

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide();
});

Nous avons sélectionné le paragraphe, ajouté un élément <span> qui va nous servir de bouton, puis nous avons masqué notre paragraphe, car la méthode before(), qui permet d’ajouter un élément avant celui sélectionné, va retourner l’objet jQuery.

Nous allons maintenant modifier notre sélection jQuery, à l’aide de la méthode prev(), qui permet de sélectionner l’élément précédent (le <span>).
Nous voyons donc ici notre première méthode qui ne retourne pas l’objet jQuery premièrement sélectionné.
C’est très intéressant, car cela va nous permettre de continuer à « chaîner » nos méthodes à partir de l’élément <span> nouvellement créé.

Nous lui appliquerons ensuite un style à l’aide de la méthode css() que nous avons vu précédemment.
Mais plutôt que de modifier une seule propriété en passant deux chaînes de caractère, nous allons lui passer un tableau associatif, contenant toutes les propriétés CSS que nous voulons définir.

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide()
	.prev().css({
		display: "block",
		height: "30px",
		width: "100px",
		lineHeight: "30px",
		textAlign: "center",
		border: "1px solid #f00",
		cursor: "pointer"
	});
});

Facile, non ?

Il ne nous reste plus qu’à attacher un événement au survol de cet élément. jQuery propose un tas de méthodes, permettant d’associer des événements à des éléments. Leur nom reprend ceux de DOM, sans le préfixe « on ». Ils prennent en paramètre une fonction.
Nous allons donc utiliser la méthode mouseover() :

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide()
	.prev().css({
		display: "block",
		height: "30px",
		width: "100px",
		lineHeight: "30px",
		textAlign: "center",
		border: "1px solid #f00",
		cursor: "pointer"
	})
	.mouseover(function(){
		$(this).next().slideDown();
	});
});

A l’intérieur de cette fonction, qui va se déclencher au survol, nous avons englobé notre <span>, représenté par this, dans un objet jQuery, puis sélectionné l’élément suivant à l’aide de next(), et finalement affiché notre paragraphe à l’aide de la méthode slideDown().

Vous avez remarqué ?
Nous sommes partis d’une unique sélection, $("p.outi").

Oui, c’est beau. Oui, c’est propre. C’est jQuery.

7 commentaires

Flux RSS des commentaires de cet article

Bonjour,

J’ai essayé de suivre vos idées pour rendre une liste () sortable() et draggable().

L’idée ce sera de pouvoir organiser des div grâce à sortable() et si un ne nous plaît pas de pouvoir le détruire avec avec hide() quand on le drop sur un div poubelle… je sais pas si j’ai étais clair…

Le truc ce serai d’écrire quelque chose comme ça :
$(« #liste »).sortable.draggable()

Si vous aviez une idée…

Merci :-)

Le 19 Oct. 2007 à 16h04 par Alexis

Aie Aie Aie… j’ai déjà fais tout ça… en faite mon problème c’est que j’ai l’impression que l’objet renvoyer par sortable() n’est pas un objet jQuery.

Donc je ne peux pas lui affecter le comportement draggable()… en plus.

On dirait qu’un objet sortable() ne peut pas être en plus draggable().

Merci beaucoup pour votre réponse et votre blog très intéressant et « original » dans l’écriture ! :-)

Le 19 Oct. 2007 à 16h32 par Alexis

Bonjour à tous,
Comment on peut faire un traduire i18n lorsque on utilise des fonctions jQuery?
Merci par avance

Le 06 Mar. 2009 à 17h46 par Redouane

Bonsoir,

Je voudrais savoir si vous aviez le code source ?

Merci.
Cordialement, LowTiste.

Le 11 Avr. 2011 à 22h30 par LowTiste

Les commentaires sont fermés sur cet article.