Curseurs de réglage de type « Facebook » avec MooTools et les feuilles de styles CSS

David Walsh

Traducteur

Alexandre TRANCHANT

Cet article vous montre comment mettre en place facilement des curseurs de réglage de type « Facebook » en utilisant les technologies JavaScript (MooTools) et les feuilles de style.

Cet article est la traduction de Facebook Sliders With Mootools and CSS publié sur le site de David Walsh. ♪

- Titre : Curseurs de réglage de type « Facebook » avec MooTools et les feuilles de styles CSS

- Auteur : David Walsh

- Traducteur : Alexandre TRANCHANT

- Parution : 9 janvier 2009

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 David Walsh. 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.

Sommaire

- I. Curseurs de réglage de type « Facebook » avec MooTools et les feuilles de styles CSS

- I-A. Première étape : Le script CSS

- I-B. Deuxième étape : Le code XHTML

- I-C. Troisième étape : Le code JavaScript utilisant MooTools

- I-D. Amusez-vous !

- I-E. That's All Folks !

- I-F. Conclusion et remerciements

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

Le rendu final est une image précédée de trois curseurs de réglage

I-A - 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:

L'image utilisée comme curseur

L'image utilisée comme barre d'attache du curseur

I-B - Deuxième étape : Le code XHTML

<img src="muse.jpg" id="muse" />
&#160;
<div id="opacity-area">
<div id="opacity-slider"></div>
</div>
<div>
<strong>Opacit&eacute;:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />
&#160;
<div id="width-area">
<div id="width-slider"></div>
</div>
<div>
<strong>Largeur:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />
&#160;
<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.

I-C - Troisiè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);
&#160;
/* 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);
&#160;
/* 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 fourni à 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.

I-D - Amusez-vous !

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

I-E - 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.

I-F - Conclusion et remerciements

Cet article a été écrit et publié le 16 avril 2008.

Cet article a été traduit avec l'aimable autorisation de David Walsh. L'article original Facebook Sliders With Mootools and CSS peut être vu sur son blog.