jScratchcard est un plugin pour le framework JavaScript jQuery permettant de créer des zones grattables à la manière des jeux de grattages que l’on retrouve chez nos buralistes. Il devient alors possible d’imaginer la création de toutes sortes de jeux de grattages directement en HTML / CSS / jQuery (rappelons que ce type de jeux existe déjà sur le web en Flash).

Très simple d’utilisation, le plugin jScratchcard propose également une personnalisation des effets de grattage assez poussée. De quoi ravir les webmasters spécialisés dans le domaine !

En tout cas, félicitation à Senamion.com pour le plugin !

Voir la page de démonstration du plugin jScratchcard.

Le contexte

Imaginons que vous devez appliquer le même comportement d’événement à un ensemble d’éléments, il devient alors tout à fait naturel de créer une classe CSS qui permettra d’identifier tous les éléments et ainsi leur appliquer le comportement d’événement simultanément.

Ceci ce traduirait par le code jQuery ci-dessous (notez que j’utilise jQuery à la place de $ pour des questions de compatibilité avec d’autres librairies) :

jQuery('.jQuery-elements-1').change(function(e){
   //traitement de l'événement
});

Le problème

Le code que nous venons de voir fonctionne bien, en revanche comment appliquer ce même comportement à un second ensemble d’éléments sans pour autant dupliquer de code ? Imaginons maintenant que nous possédons un second ensemble d’éléments portant pour une raison quelconque une classe CSS différente mais pour lequel nous désirons le même comportement d’événement.

La première solution qui vient à l’esprit consiste à dupliquer le code précédemment vu et à modifier la classe CSS utilisée pour pointer les éléments. C’est là qu’un peu d’astuce vas nous permettre d’éviter cette dupplication ! En effet, jQuery possède un puissant système de sélecteurs permettant de cibler des éléments HTML,en l’occurrence il suffira de séparer les deux classes CSS par une virgule pour appliquer le comportement d’événements à tous les éléments d’un seul coup !

jQuery('.jQuery-elements-1, .jQuery-elements-2').change(function(e){
   //traitement de l'événement
});

Pratique, n’est-ce pas ?

jQuery Sliding Clock est une horloge numérique 2.0 propulsée par JavaScript via la librairie jQuery. C’est également une démonstration très originale des possibilités de ce framework !

Dans mon récent apprentissage de l’excellente librairie JavaScript jQuery, j’ai cherché une équivalence de la fonction MooTools $defined() permettant de déterminer si un objet est défini ou non. Ce test est très pratique sous MooTools car il permet par exemple d’améliorer la généricité des scripts ou encore d’éviter d’appeler des objets non définis sur la page courante et ainsi provoquer une erreur.

Voici donc un exemple de code jQuery permettant de tester si l’élément HTML portant l’id « define » existe ou non. Si et seulement s’il existe, nous lui affecterons alors un événement click. Notez également l’utilisation de preventDefault permettant de stopper le comportement par défaut de l’événement, comme par exemple le scroll en haut de page lors du clic sur un lien :

//If an HTML element with a "define" id exists :
if($('#define').length) {
 
	$('#define').click(function(e){
 
		//We are stopping the default event like scrolling to the top of the page for a link
		e.preventDefault();
 
		//Do some stuff here
 
	});			
}