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.

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

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

 
Sélectionnez
#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:

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

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

 
Sélectionnez
<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.

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

 
Sélectionnez
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.

I-D. Amusez-vous !

Opacité: %


Largeur: pixels


Auteur: pixels

La muse, comme toujours, est Christina Ricci.

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.