MooTools - Schieberegler
Der Schieberegler ist eine Funktion, die eine Aktion beim Schieben des Knopfes oder einer beliebigen Taste widerspiegelt. Sie können Ihren eigenen Schieberegler erstellen, während Sie Elemente, den Handler, Optionen und Rückrufereignisse definieren. Lassen Sie uns mehr über Slider diskutieren.
Neuen Slider erstellen
Wir müssen zuerst die geeigneten HTML-Elemente für den Schieberegler auswählen. Unter Berücksichtigung der Grundidee eignen sich div-Elemente am besten für Schieberegler, da wir mit divs untergeordnete Elemente erstellen können. Wir müssen jetzt das CSS für diese Divs festlegen, um die Div-Struktur als perfekten Schieberegler zu erstellen. Hier ist das übergeordnete div fürslider und das Kind div ist für knob.
Wir müssen diese Divs nun als Schieberegler verwenden, indem wir die Elemente an den Slider-Konstruktor als übergeben sliderObject, und knobObject. Sehen Sie sich die folgende Syntax zum Definieren des Schiebereglers an.
Syntax
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Wir müssen auch die Schieberegleroptionen definieren.
Schieberegleroptionen
Lassen Sie uns einige Optionen diskutieren, die für Schieberegler verwendet werden.
Schnappen
Ein Fangwert kann ein wahrer oder falscher Wert sein. Hiermit wird festgelegt, ob der Knopf an den Schritten einrastet, wenn er entlang des Schiebereglers gezogen wird. Standardmäßig ist es falsch.
Offset
Dies ist der relative Versatz des Knopfes von der Ausgangsposition. Versuchen Sie, mit diesem zu experimentieren. Standardmäßig ist es 0.
Angebot
Dies ist eine sehr nützliche Option. Sie können einen Zahlenbereich festlegen, in den die Schritte unterteilt werden. Wenn Ihre Reichweite beispielsweise [0, 200] wäre und Sie 10 Schritte hätten, wären Ihre Schritte 20 voneinander entfernt. Der Bereich kann auch negative Zahlen enthalten, z. B. [-10, 0], was beim Invertieren des Bildlaufs sehr nützlich ist. Standardmäßig ist es falsch.
Rad
Wenn Sie das Rad auf true setzen, erkennt der Scroller das Mausradereignis. Wenn Sie das Mausrad verwenden, müssen Sie möglicherweise den Bereich anpassen, um sicherzustellen, dass das Mausradereignis nicht invertiert erscheint (dazu später mehr).
Schritte
Die Standardeinstellung von 100 Schritten ist sehr nützlich, da sie einfach als Prozentsatz verwendet werden kann. Sie können jedoch so viele Schritte (die verwendbar sind) innerhalb des Rahmens festlegen. Standardmäßig ist es 100.
Modus
Der Modus definiert, ob sich ein Schieberegler als vertikal oder horizontal registriert. Es sind jedoch noch einige weitere Schritte erforderlich, um von horizontal und vertikal zu konvertieren. Standardmäßig ist es horizontal.
Rückrufereignisse
Es gibt drei wichtige Rückrufereignisse, die ein Slider bereitstellt.
bei Änderung
Jede Änderung im vorliegenden Schritt löst die Ausführung des Ereignisses aus. Sehen Sie sich das folgende Beispiel an, um zu sehen, wann es ausgeführt wird.
onTick
Jede Änderung der Position des Handles löst die Ausführung dieses Ereignisses aus. Schauen Sie sich das folgende Beispiel an, um zu sehen, was dies ausführt.
onComplete
Dieses Ereignis wird immer dann ausgeführt, wenn das Handle losgelassen wird. Sehen Sie sich das folgende Beispiel an, um zu sehen, wann es ausgeführt wird.
Beispiel
Im folgenden Beispiel werden der horizontale und vertikale Schieberegler sowie die Ereignisanzeigen erläutert. Schauen Sie sich den folgenden Code an.
<!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>Ausgabe
Klicken Sie auf den braunen Knopf in den horizontalen oder vertikalen Schiebereglern und ziehen Sie ihn. Sie finden die Schrittposition und Ereignisanzeige für jede Aktion.