MooTools - Sliders
Slider è una funzionalità che riflette un'azione mentre si fa scorrere la manopola o qualsiasi pulsante. È possibile creare il proprio dispositivo di scorrimento durante la definizione di elementi, gestore, opzioni e eventi di richiamata. Parliamo di più sullo slider.
Creazione di un nuovo dispositivo di scorrimento
Dobbiamo prima scegliere gli elementi HTML adatti per lo slider. Pur considerando l'idea di base, gli elementi div sono i più adatti per gli slider perché utilizzando i div, possiamo creare elementi figlio. Ora dobbiamo impostare il CSS per quei div per rendere la struttura div come un cursore perfetto. Qui, il div genitore è perslider e il div figlio è per knob.
Ora dobbiamo usare questi div come slider passando gli elementi al costruttore Slider come sliderObject, e knobObject. Dai un'occhiata alla seguente sintassi per definire lo slider.
Sintassi
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Dobbiamo anche definire le opzioni del cursore.
Opzioni di scorrimento
Parliamo di alcune opzioni che vengono utilizzate per i cursori.
Scatta
Un valore snap può essere un valore vero o falso. Questo determina se la manopola si aggancia agli step mentre viene trascinata lungo lo slider. Per impostazione predefinita, è falso.
Compensare
Questo è l'offset relativo della manopola dalla posizione iniziale. Prova a sperimentare con questo. Per impostazione predefinita, è 0.
Gamma
Questa è un'opzione molto utile. È possibile impostare un intervallo di numeri in cui verranno suddivisi i passaggi. Ad esempio, se il tuo intervallo fosse [0, 200] e avessi 10 passaggi, i tuoi passaggi sarebbero separati di 20. L'intervallo può includere anche numeri negativi, ad esempio [-10, 0], che è molto utile quando si inverte lo scorrimento. Per impostazione predefinita, è falso.
Ruota
Imposta la rotellina su true e lo scroller riconoscerà l'evento della rotellina del mouse. Quando si utilizza la rotellina del mouse, potrebbe essere necessario regolare l'intervallo per assicurarsi che l'evento della rotellina del mouse non appaia invertito (di nuovo, ne parleremo più avanti).
Passi
L'impostazione predefinita di 100 passaggi è molto utile in quanto è facile da usare come percentuale. È tuttavia possibile impostare quanti passaggi (utilizzabili) entro limiti ragionevoli. Per impostazione predefinita, è 100.
Modalità
La modalità definirà se uno slider si registra come verticale o orizzontale. Tuttavia, ci sono alcuni passaggi necessari per la conversione da orizzontale a verticale. Per impostazione predefinita, è orizzontale.
Eventi di richiamata
Ci sono tre importanti eventi di callback forniti da uno Slider.
onChange
Qualsiasi cambiamento nella fase attuale attiva l'esecuzione dell'evento. Controlla l'esempio riportato di seguito per vedere quando viene eseguito.
onTick
Qualsiasi cambiamento nella posizione dell'handle attiva l'esecuzione di questo evento. Controlla l'esempio riportato di seguito per vedere cosa viene eseguito.
onComplete
Questo evento viene eseguito ogni volta che l'handle viene rilasciato. Controlla l'esempio riportato di seguito per vedere quando viene eseguito.
Esempio
Il seguente esempio spiega il cursore orizzontale e verticale insieme agli indicatori di evento. Dai un'occhiata al seguente codice.
<!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>Produzione
Fare clic sulla manopola marrone sui cursori orizzontale o verticale e trascinarla, troverete la posizione del passo e l'indicazione dell'evento per ciascuna azione.