MooTools - Curseurs
Le curseur est une fonctionnalité qui reflète une action tout en faisant glisser le bouton ou n'importe quel bouton. Vous pouvez créer votre propre curseur tout en définissant les éléments, le gestionnaire, les options et les événements de rappel. Parlons plus en détail du curseur.
Créer un nouveau curseur
Nous devons d'abord choisir les éléments HTML appropriés pour slider. Tout en considérant l'idée de base, les éléments div sont les plus appropriés pour les curseurs car en utilisant divs, nous pouvons créer des éléments enfants. Nous devons maintenant définir le CSS pour ces divs pour faire de la structure div un curseur parfait. Ici, le div parent est pourslider et le div enfant est pour knob.
Nous devons maintenant utiliser ces divs comme curseurs en passant les éléments au constructeur Slider comme sliderObject, et knobObject. Jetez un œil à la syntaxe suivante pour définir le curseur.
Syntaxe
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Nous devons également définir les options du curseur.
Options du curseur
Laissez-nous discuter de quelques options qui sont utilisées pour les curseurs.
Casser
Une valeur d'accrochage peut être une valeur vraie ou fausse. Ceci détermine si le bouton s'accroche aux étapes lorsqu'il est déplacé le long du curseur. Par défaut, il est faux.
Décalage
Il s'agit du décalage relatif du bouton par rapport à la position de départ. Essayez d'expérimenter celui-ci. Par défaut, il vaut 0.
Intervalle
C'est une option très utile. Vous pouvez définir une plage de nombres dans laquelle les étapes seront introduites. Par exemple, si votre plage était [0, 200] et que vous disposiez de 10 étapes, vos étapes seraient espacées de 20. La plage peut également inclure des nombres négatifs, par exemple [-10, 0], ce qui est très utile lors de l'inversion du défilé. Par défaut, il est faux.
Roue
Réglez la molette sur vrai et la molette reconnaîtra l'événement de la molette de la souris. Lorsque vous utilisez la molette de la souris, vous devrez peut-être ajuster la plage pour vous assurer que l'événement de la molette de la souris n'apparaît pas inversé (encore une fois, nous en reparlerons plus tard).
Pas
La valeur par défaut de 100 étapes est très utile car elle est facile à utiliser en pourcentage. Vous pouvez, cependant, définir autant d'étapes (utilisables) dans la limite du raisonnable. Par défaut, il est de 100.
Mode
Le mode définira si un curseur s'enregistre comme vertical ou horizontal. Cependant, il y a quelques étapes supplémentaires nécessaires pour passer de l'horizontale à la verticale. Par défaut, il est horizontal.
Événements de rappel
Un curseur fournit trois événements de rappel importants.
sur le changement
Tout changement dans l'étape actuelle déclenche l'exécution de l'événement. Consultez l'exemple ci-dessous pour voir quand il s'exécute.
onTick
Toute modification de la position de la poignée déclenche l'exécution de cet événement. Consultez l'exemple ci-dessous pour voir ce que cela exécute.
onComplete
Cet événement s'exécute chaque fois que la poignée est lâchée. Consultez l'exemple ci-dessous pour voir quand il s'exécute.
Exemple
L'exemple suivant explique le curseur horizontal et vertical ainsi que les indicateurs d'événement. Jetez un œil au code suivant.
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825');
$('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825');
$('knob_pos').set('html', pos);
//this line is very necessary (left with 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',
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
//sets the vertical one to start at 0
//without this it would start at the top
SliderObjectV.set(0);
//sets the slider to step 7
$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>Production
Cliquez sur le bouton marron sur les curseurs horizontaux ou verticaux puis faites-le glisser, vous trouverez la position de l'étape et l'indication d'événement pour chaque action.