Après avoir essayé à plusieurs reprises et par tous les moyens de styler les éléments d’un formulaire html pour donner vie aux créations des graphistes, il a bien fallu se rendre à l’évidence : ce n’est pas possible ! Déjà les styles ne sont pas appliqués de façon identique selon les navigateurs, mais en plus ces éléments diffèrent selon les systèmes d’exploitation et leurs versions successives, CQFD.

Après avoir tenu ce discours : «Non les formulaires, on ne peut pas les styler, désolé» pendant des années, les webdesigners les plus tenaces sont revenus avec des exemples de sites en nous disant : «Tu me dis que c’est pas possible, mais là sur tel site, ils l’ont fait.»”

Ok, reprenons : styler des éléments de fomulaire html, ça ne donne pas un résultat terrible, mais… avec javascript on arrive à voir un résultat plutôt satisfaisant. La question est : faut-il utiliser du JS pour faire de la cosmétique ? Parce que la seule chose qu’on fait avec JS ce n’est pas styler des éléments de formulaires, mais au mieux cacher des éléments de formulaires (ou les rendre invisibles) pour leur substituer des éléments graphiques, au pire remplacer des éléments de formulaires par d’autres balises html qui elles pourront être stylées avec CSS. Par exemple, remplacer un select par une liste non ordonnée. Est-ce que le jeu en vaut la chandelle ? Est-ce qu’on va alourdir les pages et retarder leur affichage pour quelques effets que l’utilisateur ne remarquera même pas ?

La question que tout le monde se pose (ou peut-être qu’il n’y a que moi qui me la pose), c’est pourquoi on ne peut pas styler les éléments de formulaire ? Ok pour les input de type texte (et encore pas avec tous les navigateurs), mais pourquoi pas les listes déroulantes de type select, les cases à cocher ou autres boutons radio ? Y-a-t-il une raison à ça ou les fabricants de navigateurs, se sont dit : «oups, on a oublié les formulaires !» «Laisse tomber on va dire que c’est fait exprès.»

Argumentons dans le sens où c’est fait exprès : les internautes ont l’habitude de leur système d’exploitation, du coup ils vont toujours identifier ces éléments quelque soit le navigateur dans lequel ils sont, et ça en terme d’utilisabilité c’est imbattable ! Mouais, pas vraiment convaincant tout ça…

Est-ce qu’on se posait la question avant ? «Fais moi ça en flash c’est plus joli». Ce serait de la faute de flash, alors ? Toujours est-il qu’on trouve de plus en plus de plugins qui permettent de faire ça facilement, tentant, non ? J’en ai essayé deux ou trois, je vous donne mon avis :

jQuery UI selectmenu

Pas des plus facile à manipuler, mais très complet, il couvre largement le spectre des utilisations de menus avec des listes déroulantes. Trop de styles inline qui complique le skinning des css externes. A noter que ce plugin utilise les attributs ARIA pour l’accessibilité.

jQuery UI checkbox

Simplissime. Par exemple pour une case à cocher il suffit d’initialiser le script de cette façon $('input').checkBox();
Et la case à cocher est remplacée par un span avec la classe “ui-checkbox”, il ne reste plus qu’à appliquer les CSS.

jQuery Stylish select

Je ne l’ai pas testé personnellement, mais ça a été utilisé sur un projet récent dans ma boîte. Complètement customisable en CSS et ultra light.

Uniform

Je suis tombé sur celui-ci il y a quelques jours, il me parait assez complet et facilement skinnable, une image sprite pour tous les éléments (vous pouvez créer des thèmes et les proposer sur le site), une fois les éléments stylés la navigation au clavier me parait correcte, reste juste à mettre plus en avant le focus sur les éléments.

Après c’est vous qui voyez… Personnellement, je ne trouve pas ça indispensable, mais pourquoi pas si les contraintes de conception ne sont pas trop draconiennes.

Bon je repose ma question aux concepteurs de navigateurs : Pourquoi les éléments de formulaire ne peuvent être stylés de la même façon que les autres balises html ?

L’équipe de jQuery vient d’annoncer un nouveau site entièrement dédié aux interfaces tactiles et mobiles : jQuery Mobile.

Le but est bien sûr d’optimiser jQuery pour ces nouvelles plates-formes, mais ce n’est pas tout : une version mobile de jQuery UI est également prévue !

Et plutôt que d’adapter jQuery UI à ces nouvelles contraintes, le projet consiste dans un premier temps à réfléchir sur les évolutions possibles du framework, de manière à ce qu’il prenne nativement en compte ces nouvelles interfaces.

Un des problèmes posés actuellement par jQuery UI est son système de gestion des thèmes graphiques, Theme Roller, qui est trop « simple » pour permettre de créer des interfaces complexes.

Prototype d’interface pour jQuery UI Mobile

Évidemment, une évolution en ce sens profiterait également au web « classique ».

Mon petit doigt me dit que ce qui va en sortir risque bien de s’appeler jQuery UI 2, librairie à la fois adaptée au mobile et au desktop, de manière évolutive selon la plate-forme de destination.

Vous pouvez voir quelques prototypes et suivre les étapes de développement sur cette page : http://wiki.jqueryui.com/Mobile

jQuery UI suit donc la même direction que ExtJS, qui vient récemment de sortir en « version » mobile : Sencha Touch.

Mais pourquoi associe-t-on systématiquement tactile (nouvelles possibilités d’interaction) et mobile (espace d’affichage réduit, bande passante et puissance limitées − pour l’instant) ?
Les deux problématiques (nouveau type d’interaction, et nouvelles dimensions d’écran) sont différentes, et existent aussi indépendamment l’une de l’autre.

Tout ceci me donne l’impression que le domaine des applications web (HTML5 Apps en buzz-language ;-) ) est dans une période de transition, et se dirige doucement vers une unification de ces « multiples web », tout en respectant les spécificités et contraintes de chaque interface.

Rendez-vous dans 10 5 2 ans !

Enfin « les », événements. Je voulais un titre sensationnel.

Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Alors c’est ici.

Le développement DOM/Javascript repose en grande partie sur les événements. Vous savez certainement qu’il est possible d’affecter un événement à un objet jQuery, c’est à dire qu’une fonction se déclenchera lors d’un événement sur l’objet sélectionné.

jQuery propose deux manières de définir les événements : nous allons les analyser.

Les « Event Helpers »

Joli nom. Pas très causant, mais sympa comme tout.

Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Elles prennent comme unique paramètre une fonction, et leur nom correspond à celui de l’événement DOM, allégé de son préfixe « on » (onclick, onmouseout, etc. ).

Si aucun paramètre n’est passé, cette méthode déclenche l’événement.

Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »).

Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : http://docs.jquery.com/Events.

Définir un événement

Commençons par un exemple. Tout le monde aime les exemples !

L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction :

$("a#test1").click(function(){
  window.alert("Clic sur a#test1.");
});

La fonction passée en paramètre peut attendre un paramètre. Il représente l’objet événement, et possède plusieurs propriétés et méthodes. J’ai l’habitude d’utiliser une variable nommée « e » (event), mais on peut évidemment utiliser un autre nom.

La méthode preventDefault() de cet objet permet d’empêcher le navigateur de déclencher son comportement par défaut.
Sur un lien, cette méthode empêchera simplement le navigateur de le suivre.

Exemple.

$("a#test1").click(function(e){
  e.preventDefault(); // Empêche le navigateur de suivre le lien.
  window.alert("Clic sur a#test1.");
});

Démonstration : a#test1

Les Namespaced Events (événements nommés)

Nous avons vu qu’il était possible avec unbind() de supprimer une seule des fonctions attachées à un événement, mais cette méthode est peu élégante, puisqu’elle n’autorise pas l’utilisation de fonctions anonymes.

Pour remédier à cela, jQuery permet de nommer une fonction attachée à un événement.
Une notation similaire à celle des classes CSS est utilisée, accolée au nom de l’événement (« .action1″, « .action2″ et « .action3″ ici) :
$(element).bind("click.action1", function(){ /* Action 1 */ });
$(element).bind("click.action2", function(){ /* Action 2 */ });
$(element).bind("click.action3", function(){ /* Action 3 */ });

Il sera alors possible de déclencher un événement en particulier en ciblant une fonction événement en particulier, ou toutes les fonctions attachées, en déclenchant simplement l’événement « click » :
$(element).trigger("click.nom1"); /* Déclenche l'action 1 */
$(element).trigger("click"); /* Déclenche les actions 1, 2 et 3 */

Évidemment, il sera possible de les supprimer, individuellement, ou non.
$(element).unbind("click.nom1"); /* Supprime l'action 1 */
$(element).trigger("click"); /* Déclenche les actions 2 et 3 (la 1 vient d'être supprimée, sois attentif) */

La méthode .triggerHandler()

Pour finir, la méthode triggerHandler() permet de déclencher les différentes fonctions attachées à un événement, sans déclencher l’action par défaut du navigateur.

Prenons l’événement focus sur un champ texte de formulaire. Si vous lui affectez une action particulière (comme afficher une bulle d’information), vous pourrez alors déclencher cette action sans déplacer le curseur de l’utilisateur dans le champ :
$(input[type=text]).bind("focus", function(){ /* Affichage de la bulle d'information */ });
$(input[type=text]).trigger("focus"); /* Déplacement du curseur dans le champ texte, affichage de la bulle d'information */
$(input[type=text]).triggerHandler("focus"); /* Affichage de la bulle d'information seulement */

Voilà, c’est fini.

Vous avez toujours voulu être branché ? Non ? Pourquoi tu dis rien ?

T’aimes pas les accroches interrogatives

Voici donc la suite de notre série d’articles consacrés à jQuery, avec aujourd’hui : le plugin !

La conception de jQuery, centrée sur un même objet, permet d’étendre naturellement notre bibliothèque en créant de nouvelles méthodes. Un plugin sera alors utilisé de cette façon :

$("p").monplugin();

Nous créerons pour l’exemple un plugin qui fait danser les éléments sélectionnés, appelons-le « jQuery Dance ».

On pourra éventuellement lui passer des options : le tempo, et la taille de la piste de danse bien entendu !

Il sera utilisé ainsi :

$("p").dance();

Ah, vous l’aviez certainement noté : la sonorité de jQuery est proche de celle de charcuterie. Et comme pour la rosette, certaines règles sont à respecter pour créer un plugin de qualité, les voici.

Nommez votre fichier

Un plugin doit toujours se nommer ainsi, de manière à ce qu’il soit immédiatement identifiable : jquery.nom_du_plugin.js
Notre fichier se nommera donc jquery.dance.js.

Isolez votre code

Dans ce fichier nouvellement créé, nous allons commencer par englober tout ce qui va être écrit dans une fonction anonyme qui sera immédiatement executée. De cette manière, toutes les variables que vous créerez ne rentrerons pas en collision avec les autres scripts présents sur la page.

(function(){
	// Code
})()

Nous allons en profiter pour passer la variable jQuery (dont $ n’est qu’un alias) à cette fonction, de cette manière :

(function($){
	// Code
})(jQuery)

Cela permettra d’utiliser la variable $ à l’intérieur de notre fonction.
Pourquoi, puisque $ est déjà un alias de jQuery ?

jQuery permet de renommer cette fonction à l’aide de jQuery.noConflict().
Il est donc possible de faire cohabiter jQuery et l’une des nombreuses librairies utilisant la fonction $() (comme Prototype), en renommant l’alias comme bon nous semble :

var $j = jQuery.noConflict();

Nous devons donc nous assurer que la fonction $() existe bien, et que nous n’utilisons pas une autre librairie à la place de jQuery.

Ajoutez votre nouvelle méthode à jQuery.fn

Après avoir créé notre environnement, nous sommes prêts à écrire notre plugin.
Nous voulons donc ajouter une nouvelle méthode aux objets jQuery. Il faut pour cela ajouter une nouvelle fonction à l’objet jQuery.fn. Dans cette fonction, le mot-clé this représente l’objet jQuery sélectionné par l’utilisateur de votre plugin.

Dans le cas où notre plugin serait défini de cette façon :

(function($){
	$.fn.dance = function(){
		alert(this == ma_selection);
	};
})(jQuery)

Et qu’une variable globale (absence du mot var) ma_selection soit définie ainsi :

// Au chargement...
$(function(){
	ma_selection = $("p");
	ma_selection.dance();
});

Le message affiché par la fonction alert() serait true.

Bouclez sur les éléments sélectionnés

Vous devez toujours considérer que plusieurs éléments ont été sélectionnés avant d’appeler votre méthode.

Pour traiter chacun de ces éléments, la méthode each() de jQuery sera utilisée. cette méthode prend en paramètre une fonction, qui sera executée pour chaque élément. Dans cette boucle, le mot this correspondra cette fois à chacun des éléments DOM de cette sélection.
Pour obtenir un objet jQuery, il faudra passer cet élément à la fonction $().

(function($){
	$.fn.dance = function(){
		this.each(function(){
		  // this : élément DOM classique
		  // $(this) : élément jQuery
		});
	};
})(jQuery)

Gardez à l’esprit que cette fonction est executée pour chacun des éléments de la sélection. Il est donc préférable de ne placer dans cette fonction que les traitements liés à chaque élément en particulier.

(function($){
	$.fn.dance = function(){

		// Le tempo est le même pour tous les éléments,
		// inutile de le redéfinir à chaque  fois.
		var tempo = 300;

		// Cette fonction n'est définie qu'une fois,
		// puis appelée par chacun des éléments.
		function move(jElt){
			// Nous placerons ici le code permettant
			// de faire danser le Boogie Woogie à un élément
		};

		this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Retournez l’objet sélectionné

Cette pratique permettra d’utiliser plusieurs méthodes en chaîne :

$("p").dance().css("color", "red");

Evidemment, si votre plugin renvoie une information, il ne sera alors pas possible de chaîner plusieurs méthodes (comme avec la méthode width() par exemple).

Il faudra donc que votre méthode retourne this avant de se terminer.

(function($){
	$.fn.dance = function(){

		// Code...

		return this;
	};
})(jQuery)

Et puisque la méthode each() de jQuery renvoie l’élément sélectionné, vous pouvez retourner votre sélection en bouclant sur chacun des éléments :

(function($){
	$.fn.dance = function(){

		// Code...

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Bien, nous avons vu les bases de la création d’un plugin. Le plugin « jQuery Dance » peut maintenant être utilisé de cette façon :

$("p").dance().css("border","1px");

Passez des paramètres à votre méthode

Comme nous l’avons vu au début de cet article, la méthode dance() prendra deux paramètres : tempo et dancefloorArea, correspondant respectivement à la fréquence d’execution de chaque mouvement(en millisecondes), et à la surface que pourra utiliser cet élément (en pixels).

Définir des paramètres pour notre méthode est très simple :

(function($){
	$.fn.dance = function(tempo, dancefloorArea){

		// Code...

	};
})(jQuery)

La méthode pourra donc être appelée de cette façon :

$("p").dance(300, 400)

Etendez vos paramètres optionnels

Avant d’avancer dans la réalisation de jQuery Dance et de permettre à nos éléments de se déhancher sur le dancefloor, nous allons voir une dernière technique, permettant de passer des paramètres optionnels à une méthode jQuery.

Nos paramètres ne seront alors plus passés directement, mais à l’aide d’un tableau associatif :

$("p").dance({tempo: 300, danceFloorArea: 400})

La fonction jQuery.extend(a, b) permet d’étendre un objet a avec un objet b, en écrasant les propriétés redéfinies.
Voici un exemple :

var objet_a = {
	param_1: "Bonjour",
	param_2: "les p'tits gars"
};
var objet_b = {
	param_2: "tout le monde",
	param_3: "ça va ?"
};

$.extend(objet_a, objet_b);

alert(objet_a.param_1); // Bonjour
alert(objet_a.param_2); // tout le monde
alert(objet_a.param_3); // ça va ?

En plus de l’étendre, cette fonction renvoie le premier objet modifié, ce qui est très pratique lorsque le premier objet est défini en paramètre :

var objet_b = {
	param_2: "tout le monde",
	param_3: "ça va ?"
};

var objet_a = $.extend({
	param_1: "Bonjour",
	param_2: "les p'tits gars"
}, objet_b);

Nous utiliserons cette technique pour étendre nos paramètres par défaut avec ceux passés à la méthode, de cette façon :

(function($){
	$.fn.dance = function(params){

		// Si aucun paramètre n'est passé
		// et que params est vide, alors $.extend()
		// renverra simplement le premier objet passé
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		function move(jElt){
			// Boogie Woogie
		};

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Voulez-vous danser mademoiselle ?

Chacun de nos éléments sera déplacé, au hasard, sur la surface définie par dancefloorArea (400px par défaut). Chacun de ces déplacements sera déclenché selon l’intervalle définie par tempo (300 millisecondes par défaut).

Nous allons définir une nouvelle fonction (tirée de la documentation Mozilla), permettant d’obtenir un nombre entier situé entre les deux passés en paramètres.

Nous allons également définir les variables minPosition et maxPosition d’après params.dancefloorArea

(function($){
	$.fn.dance = function(params){

		// Paramètres
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		// Renvoie un entier situé entre min et max
		function getRandomInt(min, max){
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		};

		// Positions minimales et maximales
		// que pourra prendre un élément
		var minPosition = -(params.dancefloorArea/2);
		var maxPosition = params.dancefloorArea/2;

		// Mouvement d'un élément
		function move(jElt){
			var topPos = getRandomInt(minPosition, maxPosition);
			var leftPos = getRandomInt(minPosition, maxPosition);
		};

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Pour chaque élément, une position sera définie à l’aide des variables leftPos et topPos.

Il nous reste donc à animer notre élément vers cette position pendant le temps défini par tempo, puis à appeler cette fonction, encore et encore, jusqu’au bout de la nuit. Nous utiliserons la méthode animate() de jQuery. Les éléments seront également positionnés en relatif pour être déplacés par rapport à leur position, sans gêner les voisins parce que bon, ils n’ont rien demandé eux.

(function($){
	$.fn.dance = function(params){

		// Paramètres
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		// Renvoie un entier situé entre min et max
		function getRandomInt(min, max){
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		};

		// Positions minimales et maximales
		// que pourra prendre un élément
		var minPosition = -(params.dancefloorArea/2);
		var maxPosition = params.dancefloorArea/2;

		// Mouvement d'un élément
		function move(jElt){
			var topPos = getRandomInt(minPosition, maxPosition);
			var leftPos = getRandomInt(minPosition, maxPosition);

			// Préfixer une variable par la lettre j
			// (ou ce qui vous semblera pertinent)
			// permet d'identifier facilement un objet jQuery.
			jElt.animate(

				// Premier paramètre : les nouvelles propriétés CSS
				// vers lesquelles l'élément va être animé.
				{
					top: topPos + "px",
					left: leftPos + "px"
				},

				// Deuxième paramètre : le temps que durera l'animation
				params.tempo,

				// Troisième paramètre, la fonction qui sera appelée
				// lorsque l'animation sera terminée.
				function(){
					move(jElt); // Nous appelons à nouveau la fonction move()
				}
			);
		};

		return this.css("position", "relative").each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Vous trouverez une démonstration de notre plugin à cette adresse : http://www.lesintegristes.net/demos/jquery/dance.html

Je dois avouer, et vous le reconnaîtrez sûrement, que le résultat est affligeant. Mais bon, hein.

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.

-  » 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.

Inauguration de ce nouveau blog !

Eric, Gafour et moi-même, à travers l’expérience que nous accumulons chaque jour, allons essayer de faire quelque chose d’intelligent ici, et c’est loin d’être gagné !

Nous y parlerons standards, accessibilité, technique, organisation et méthodes de travail.

Commençons technique, avec cette bibliothèque Javascript que j’apprécie particulièrement :

jQuery

Il existe déjà quelques tutoriels et présentations sur jQuery, mais je vais essayer d’en expliquer les bases à ma façon, en espérant que ça puisse aider quelqu’un.

jQuery repose sur une seule fonction, c’en est d’ailleurs effrayant de simplicité : $(). C’est tout.
Mmm… d’accord, je vais développer un peu.

Selon les paramètres que l’on va lui passer, cette fonction va réagir de différentes manières. Voici les types de paramètres que l’on peut lui passer :

Une fonction

Dans ce cas, jQuery va charger cette fonction lorsque la page sera chargée par le navigateur.

Mais pourquoi ne pas utiliser le classique window.onload = function(){} ?

Principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long.

Pour reprendre le processus :

1. Le fichier html est téléchargé.
2. Il est lu par le navigateur.
3. Le navigateur commence à télécharger les éléments auxquels le fichier html fait référence (images, css…).
4. Le code situé dans $(function(){}) est exécuté dès que possible.
5. Lorsque tout est téléchargé, le code situé dans window.onload = function(){} est exécuté, en dernier.

Théoriquement, ce code devrait même être exécuté avant l’affichage, mais en réalité le navigateur peut commencer à afficher la page avant qu’elle ne soit complètement téléchargée.
De plus, les téléchargements ne se font pas un par un, car le navigateur n’attend pas qu’une image arrive pour en télécharger une autre, heureusement !

Voilà qui facilite le côté non-intrusif du Javascript :
Si un élément ne doit apparaître qu’au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n’est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle !

On peut l’utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :

var ma_fonction = function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);

Ou, plus directement, en passant simplement une fonction anonyme à jQuery :

$(function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
});

Un élément, ou un tableau d’éléments DOM

Vous vous en doutiez, jQuery, cet insolent, n’est pas qu’un « super loader ».
En lui passant des éléments du DOM, la fonction $() va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.

Un peu comme une grosse boîte magique, dans laquelle on va mettre tout ça.

Il est possible de passer un élément, ou un tableau d’éléments à jQuery.
Il va sans dire que le code suivant doit être placé dans le « chargeur » jQuery, vu juste au-dessus, pour être exécuté :

var mon_element = document.getElementById("id_de_mon_element_html");
var mon_objet_jquery = $(mon_element);

Une chaine de caractères

Notre formidable sens de la déduction nous a immédiatement permis de comprendre la raison du « j ». Mais pourquoi « Query » ?

En passant une chaine de catactères à la fonction $(), nous allons lui demander de nous retourner un objet jQuery rempli d’éléments, sans même avoir à sélectionner préalablement les objets DOM.

- Sorcellerie !

Ecoutez, calmez vous et posez cette fourche, sinon nous allons avoir du mal à avancer.

Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.

Les sélecteurs CSS

J’imagine que si vous lisez ceci, vous avez au moins une vague connaissance du langage CSS, et c’est merveilleux !

Prenons cette structure HTML :

<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien ensemble.</p>
</div>

Nous voulons sélectionner le premier élément <p>.
Voici différentes possibilités :

// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");      

// Sélection du premier élément <p> de l'élément <div>.
var mon_objet_jquery = $("div p:first-child");      

// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant pour classe "ique".
var mon_objet_jquery = $("div > p.ique");

Le langage CSS offre suffisamment de flexibilité pour permettre une sélection fine et souple.

Que se passe-t-il dans la boîte ? Comme vous vous en doutiez, ces sélecteurs CSS n’ont aucun rapport avec l’interprétation CSS de votre navigateur.

jQuery va lire cette phrase et la transformer en sélection DOM, mixer cette joyeuse troupe d’une façon dont vous n’aurez absolument pas à vous préoccuper, pour vous retourner précisément le résultat de votre requête, et le tout soigneusement emballé dans un objet jQuery, poil au nombril.

Imaginez le cas suivant : vous souhaitez sélectionner tous les éléments p ayant pour classe « ique ».
On peut alors utiliser la méthode getElementsByTagName("p"), qui va nous retourner un tableau d’éléments p.
Nous pourrons ensuite trier ce tableau à l’aide d’une boucle, pour ne garder que ceux ayant pour classe « ique ». On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.

Avec jQuery, une ligne suffit : $("p.ique");.
C’est beau, c’est simple, et cette phrase a un parfum de slogan minable.

Il est bien sûr possible, comme en CSS, d’utiliser plusieurs sélecteurs à la fois :

var mon_objet_jquery = $("#fixe .ique, #fixe :last-child");

Vous trouverez sur la documentation de jQuery une liste des sélecteurs supportés par jQuery, ceux dont la syntaxe diffère légèrement de la spécification CSS, ceux qui n’auraient aucun sens pour jQuery (E:visited, E:first-letter), et ceux qui ne sont pas supportés en raison d’un manque d’utilité réelle :
Documentation des sélecteurs jQuery

XPath

jQuery ajoute à cela une implémentation basique de XPath.

Voici comment sélectionner les éléments p enfants de body, lui-même enfant de html :

$("/html/body//p");

Documentation XPath de jQuery

Les sélecteurs jQuery

Il existe également une série de sélecteurs n’ayant aucun équivalent CSS ou XPath ; ces derniers peuvent se révéler très pratiques comme dans les exemples suivants :

Sélection des éléments impairs :

$("div p:odd");

Sélection des éléments inférieurs à (less than) 4 :

$("div p:lt(4)");

Ou encore la sélection des éléments d’un formulaire (input, select, textarea, button) :

$("div p:input");

Vous trouverez l’intégralité des exemples sur la documentation. Contrairement à XPath que j’utilise finalement assez rarement, ces derniers sont utiles dans de nombreuses situations, pensez-y :
Documentation des sélecteurs propres à jQuery

Chemise sous le chapeau, il est possible de combiner les différents types de sélecteurs que nous venons de voir, dans une même requête !

Voilà, nous avons vu comment remplir notre boîte magique, nous verrons lors du prochain article comment remuer tout ça !

Quelques jQueryfiseries :

• Site de jQuery
• Documentation de jQuery
• Blog officiel de jQuery
• Tutoriels jQuery