Curseurs de réglage de type "Facebook" avec Mootools et les feuilles de styles CSS

Date de publication originale : 16 avril 2008

Date de la traduction : 09 janvier 2009

• Version originale écrite par : David Walsh.
• Traduit par Alexandre TRANCHANT
• Autres articles

Remerciements à RideKick pour sa relecture.

Cet article vous montre comment mettre en place facilement des curseurs de réglage de type "Facebook" en utilisant les technologies JavaScripts (Mootools) et les feuilles de style.

Sommaire

• Curseurs de réglage de type "Facebook" avec Mootools et les feuilles de styles CSS
• 1 - Première étape : Le script CSS
• 2 - Deuxième étape : Le code XHTML
• 3 - Troisième étape :
• 4 - Exemple
• 5 - That's all Folks

Curseurs de réglage de type "Facebook" avec Mootools et les feuilles de styles CSS

L'un des intérêts que trouve [David Walsh] à être un développeur utilisant Facebook est qu'il peut y trouver de bonnes idées pour rendre un site plus interactif. Facebook est composé de nombreuses fonctionnalités avancées AJAX et JavaScript : Chargement de photos par des flèches droites et gauches, des menus déroulants, fenêtres d'alertes et des curseurs de réglage. Un tel curseur permet à l'utilisateur de faire glisser un bouton sur un segment pour paramètrer une valeur en lieu et place d'un ennuyeux et fastidieux champ texte. [David Walsh a] créé un très simple système composé de trois curseurs qui permettent à l'utilisateur de modifier la hauteur, la largeur et la transparence d'une image. Voici ce que cela donne.

Première étape : Le script CSS

#opacity-area, #width-area, #height-area { 
  background:url(horizontal.jpg) 0 8px no-repeat; 
  height:23px; 
  width:500px; 
  margin:0 0 5px 0; 
}
#opacity-slider, #width-slider, #height-slider	{ 
  background:url(button-horizontal.jpg) no-repeat; 
  width:33px; 
  height:23px; 
  cursor:pointer; 
}
 

Il y a très peu de code CSS impliqué. [David Walsh] a utilisé deux images comme arrière-plan pour les curseurs:

Deuxième étape : Le code XHTML

<img src="muse.jpg" id="muse" />
 
<div id="opacity-area">
	<div id="opacity-slider"></div>
</div>
<div>
	<strong>Opacit&eacute;:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />
 
<div id="width-area">
	<div id="width-slider"></div>
</div>
<div>
	<strong>Largeur:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />
 
<div id="height-area">
	<div id="height-slider"></div>
</div>
<div>
	<strong>Auteur:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
<p><i>La muse, comme toujours, est Christina Ricci.</i></p>
 

Une fois de plus, très peu de code XHTML est utilisé. Le code ne présente que des conteneurs [NDLT : sous forme de balise <div>] pour les différents éléments composant chaque curseur.

Troisème étape : Le code Javascript utilisant MooTools

window.addEvent('domready', function () {
	/* opacity slider */
	var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
		steps: 100,
		wheel: 1,
		onChange: function(step){
			$('opacity-label').setHTML(step);
			$('muse').set('opacity',step / 100);
		}
	}).set(100);
 
	/* height slider */
	var mySlide = new Slider($('height-area'), $('height-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('height-label').setHTML(step);
			$('muse').set('height',step);
		}
	}).set(300);
 
	/* width slider */
	var mySlide = new Slider($('width-area'), $('width-slider'), {
		steps: 300,
		wheel: 1,
		onChange: function(step){
			$('width-label').setHTML(step);
			$('muse').set('width',step);
		}
	}).set(300);
});
 

Ce code est très répétitif, ce qui, du coup, le rend très simple à comprendre. [David Walsh] a créé une nouvelle instance de la classe Slider pour chaque curseur qu'il voulait sur la page, et fournit [NDLT : comme paramètre au constructeur] les éléments "area" et "slider". Il a également fournit à la classe les valeurs bornes (valeur maximale - valeur minimale valant 0 par défaut), une valeur "roulette" qui permet de déplacer le curseur en utilisant la molette de la souris, et une fonction "onchange" qui modifie les valeurs de la feuille de style et ajuste la largeur, la hauteur ou l'opacité de l'image. Enfin, il utilise la fonction "set()" pour définir la valeur par défaut du curseur.

EXEMPLE : Amusez-vous.

That's All Folks !

Ces curseurs peuvent être utilisés de bien des façons et [David Walsh] a choisi un tel exemple pour le rendre facilement utilisable [et pédagogique]. [David Walsh] propose, par exemple, d'utiliser les paramètres de chaque curseur afin de générer une nouvelle image à télécharger. Cependant c'est à vous de choisir comment utiliser de tels curseurs de réglages

Ecrit et posté par David Waldh Mercredi 16 avril 2008

Copyright © Alexandre TRANCHANT. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.