Si vous ne l'avez pas encore, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Pour commencer, sachez qu'un slider peut se traduire par un glisseur, c'est quelque chose qui glisse à l'écran. Mais comme c'est le terme anglais qui le plus souvent utilisé, et qu'il est difficile de lui trouver un équivalent français (glisseur c'est pas terrible..), j'utiliserai uniquement le mot "slider" dans ce tutoriel.

Maintenant l'utilisation de ces objets plugin de Mootools doit vous être un peu familière. Slider n'est pas différent, vous créez votre nouveau slider, définissez les éléments du slider et le pointeur, vous définissez vos options et puis vous créez des fonctions à appeler sur des évènements. Et bien les sliders suivent ce modèle d'utilisation familié, la route va être semé de quelques petites embûches.

Les Bases

Création d'un nouvel objet slider

Commençons par notre html et css. L'idée de base est de créer un div pour le slider, donc un long rectangle (la longueur dépend de l'utilisation qu'on va en faire) et un élément enfant qui servira de barre coulissante (knob) :

<div id="slider"><div id="knob"></div></div>

Notre css est aussi très simple. Définissez juste la largeur, hauteur et couleurs de fond :

#slider {
	width: 200px
	height: 20px
	background-color: #0099FF
}
 
#knob {
	width: 20px
	height: 20px
	background-color: #993333
}

Maintenant, nous pouvons créer notre nouvel objet slider. Pour créer le slider, envoyez d'abord vos éléments dans des variables, puis créez un “nouvel” objet slider tout comme nous l'avions fait avec tween, morph et drag.move:

//placez vos elements dans des variables
var sliderObject = $('slider');
var knobObject = $('knob');
 
//créez un nouvel objet slider
//definissez l'élément slider en premier
//puis définissez la barre coulissante (knob)
var SliderObject = new Slider(sliderObject , knobObject , {
 //voici vos options
 //nous regarderons chacun d'eux ci-dessous
 range: [0, 10],
 snap: true,
 steps: 10,
 offset: 0,
 wheel: true,
 mode: 'horizontal',
 //onchange se lance quand la valeur de step change
 //il passera l'étape courante en paramètre
 onChange: function(step){
 //ici mettez ce que vous voulez qu'il se passe sur changement
 //vous pouvez faire référence à step 
 },
 //ontick change quand l'utilisateur bouge la barre coulissante
 //il passera la position courante (relative à l'element parent)
 onTick: function(pos){
	//c'est nécessaire pour l'ajustement de la barre coulissante
 //nous parlerons de ça plus bas
	this.knob.setStyle('left', pos);
 },
 //se lance quand le déplacement s'arrête
 onComplete: function(step){
 //ici mettez ce que vous voulez qu'il se passe à la fin
 //vous pouvez faire référence à step
 }
});

Options de Slider

Snap: (par défaut : false) peut être une valeur sur vrai ou faux (true or false). Cela détermine si la barre coulissante s'enclenche sur l'étape quand il est déplacé le long du slider.

Offset: (par défaut : 0) C'est l'offset relatif de la barre coulissante lors de sa position initiale. Essayez de l'expérimenter.

Range: (par défaut : false) C'est une option très utile. Vous pouvez définir une rangée de nombres dans laquelle les étapes seront parcourues. Par exemple, si votre rangée était [0, 200] et que vous aviez 10 étapes, vos étapes se feraient en 20 parties. La rangée peut aussi se composer de nombres négatifs, par exemple [-10, 0] qui est très pratique lorsque vous inversez le sens de déplacement ou autre (voir plus bas).

Wheel: (par défaut : false) Si vous mettez wheel sur true, la barre coulissante reconnaîtra l'évènement mousewheel (molette de la souris). Lorsque vous utilisez la molette de la souris, vous aurez besoin d'ajuster la rangée pour vous assurer que l'évènement mousewheel n'apparaît pas inversé (là encore, voir plus bas).

Steps: (Par défaut sur 100) Les 100 étapes par défaut sont très pratiques car c'est facile à utiliser avec des pourcentages. Vous pouvez toutefois mettre autant d'étapes que vous le voulez, enfin en restant raisonnable.

Mode: (par défaut : ‘horizontal’) Mode définira si une barre coulissante doit être verticale ou horizontale. Toutefois, il y a d'autres petites étapes nécessaires pour convertir de l'horizontal vers le vertical.

Evènements Callback

onChange: cet évènement se lance quand l'étape courante change. Cela passe “step”. Regardez la demo ci-dessous pour voir quand ça se lance.

onTick: cet évènement se lance quand la position du pointeur est modifiée. Cela passe “position”. Regardez la demo ci-dessous pour voir quand ça se lance.

onComplete: cet évènement se lance quand le pointeur est relâché. Cela passe “step”. Regardez la demo ci-dessous pour voir quand ça se lance.

Exemple

Mettons en place une petite démo qui montre comment tout ça se passe.

.set(); Regardez l'évènement du bouton pour voir .set() en action. C'est simple à utiliser : appelez juste l'objet du slider, ajoutez .set, puis le step vers laquelle vous souhaitez aller.

window.addEvent('domready', function() {
 
var SliderObject = new Slider('slider', 'knob', {
 //options
	range: [0, 10],
	snap: false,
	steps: 10,
	offset: 0,
	wheel: true,
	mode: 'horizontal',
 
	//évènements callback
 onChange: function(step){
	$('change').highlight('#F3F825');
	$('steps_number').set('html', step);
 },
 onTick: function(pos){
	$('tick').highlight('#F3F825');
	$('knob_pos').set('html', pos);
	//cette ligne est nécessaire (left pour l'horizontal)
	this.knob.setStyle('left', pos);
 
 },
 onComplete: function(step){
	$('complete').highlight('#F3F825')
	$('steps_complete_number').set('html', step);
	this.set(step);
 }
});
 
var SliderObjectV = new Slider('sliderv', 'knobv', {
	range: [-10, 0],
	snap: true,
	steps: 10,
	offset: 0,
	wheel: true,
	mode: 'vertical',
 onTick: function(pos){
	//cette ligne est nécessaire (top pour le vertical)
	this.knob.setStyle('top', pos);
 },
	onChange: function(step){
	$('stepsV_number').set('html', step*-1);
 }
});
 
//précise à celui vertical de commencer à 0
//sans ça, il commencerait en haut
SliderObjectV.set(0);
 
//Met le slider à l'étape 7
$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
 
});

Remarquez sur l'exemple vertical que nous ne changeons pas seulement le “mode” en “vertical,” nous changeons aussi .setStyle() sur “top” au lieu de “left” dans l'évènement onTick. Aussi, voyez que la “range” commence à -10 puis va à 0. Puis, quand nous affichons le nombre à l'intérieur de onChange, nous multiplions la valeur négative par -1, donnant un résultat positif. Cela accomplit deux choses : d'abord, ça nous laisse changer la valeur de 10 à 0, avec 0 en bas. Alors que cela pourrait se faire en définissant la rangée sur 10, 0 la molette devient inversée.. Cela nous amène à la seconde raison - l'evènement mousewheel lit les valeurs, pas dans la direction dans laquelle vous souhaitez faire aller le pointeur, donc la seule façon pour que le mousewheel lise correctement le slider ET obtienne une valeur commençant à 0 en bas était d'appliquer cette petite astuce.

Note: concernant l'utilisation de “top” et “left” dans l'évènement onTick, je ne peux pas assurer si c'est ou non une “régulation” de mootools. C'est juste que je n'ai réussi à le fonctionner que comme ça, et je suis intéressé de savoir s'il y a un autre façon de le faire, peut-être plus propre.

Pour en savoir plus…

Comme toujours, lisez la section des docs sur les sliders

Tutoriel de demain

Le Plugin Sortables et Intro aux Méthodes

Téléchargez un zip avec tout ce qu'il faut 

Il inclut les librairies du noyau et extension Mootools 1.2 (core et more), ainsi qu'un fichier html, un fichier javascript externe, une feuille de style css et l'exemple ci-dessus.