MooTools - Slidery
Suwak to funkcjonalność, która odzwierciedla akcję podczas przesuwania pokrętła lub dowolnego przycisku. Możesz stworzyć własny suwak podczas definiowania elementów, obsługi, opcji i zdarzeń wywołania zwrotnego. Porozmawiajmy więcej o suwaku.
Tworzenie nowego slidera
Najpierw musimy wybrać odpowiednie elementy HTML do slidera. Rozważając podstawową ideę, elementy div są najbardziej odpowiednie dla suwaków, ponieważ używając div, możemy tworzyć elementy potomne. Musimy teraz ustawić CSS dla tych elementów div, aby struktura div była idealnym suwakiem. Tutaj nadrzędny element div jest przeznaczonyslider a element DIV dla dziecka knob.
Musimy teraz użyć tych elementów div jako suwaków, przekazując elementy do konstruktora Slider jako sliderObject, i knobObject. Spójrz na następującą składnię definiowania suwaka.
Składnia
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Musimy również zdefiniować opcje suwaka.
Opcje suwaka
Omówmy kilka opcji, które są używane w przypadku suwaków.
Kłapnięcie
Wartość przyciągania może być wartością true lub false. To określa, czy pokrętło jest przyciągane do stopni, gdy jest przeciągane wzdłuż suwaka. Domyślnie jest to fałsz.
Offsetowy
Jest to względne przesunięcie gałki od pozycji wyjściowej. Spróbuj poeksperymentować z tym. Domyślnie jest to 0.
Zasięg
To bardzo przydatna opcja. Możesz ustawić zakres liczb, na który podzielą się kroki. Na przykład, jeśli twój zakres to [0, 200] i masz 10 kroków, twoje kroki będą oddalone od siebie o 20. Zakres może również zawierać liczby ujemne, na przykład [-10, 0], co jest bardzo przydatne przy odwracaniu przewijanego tekstu. Domyślnie jest to fałsz.
Koło
Ustaw kółko na true, a przewijak rozpozna zdarzenie kółka myszy. Podczas korzystania z kółka myszy może być konieczne dostosowanie zakresu, aby zapewnić, że zdarzenie kółka myszy nie będzie odwrócone (ponownie, więcej o tym później).
Kroki
Domyślna liczba 100 kroków jest bardzo przydatna, ponieważ jest łatwa w użyciu jako wartość procentowa. Możesz jednak ustawić dowolną liczbę kroków (możliwych do wykorzystania) w granicach rozsądku. Domyślnie jest to 100.
Tryb
Tryb określa, czy suwak zarejestruje się jako pionowy czy poziomy. Jest jednak jeszcze kilka niezbędnych kroków, aby dokonać konwersji z poziomu i pionu. Domyślnie jest poziomy.
Zdarzenia oddzwaniania
Istnieją trzy ważne zdarzenia wywołania zwrotnego, które zapewnia Slider.
onChange
Każda zmiana w obecnym kroku wyzwala wykonanie zdarzenia. Sprawdź przykład podany poniżej, aby zobaczyć, kiedy jest wykonywany.
onTick
Każda zmiana położenia uchwytu wyzwala wykonanie tego zdarzenia. Sprawdź poniższy przykład, aby zobaczyć, co to powoduje.
onComplete
To zdarzenie jest wykonywane za każdym razem, gdy uchwyt zostanie zwolniony. Sprawdź przykład podany poniżej, aby zobaczyć, kiedy jest wykonywany.
Przykład
Poniższy przykład wyjaśnia suwak poziomy i pionowy wraz ze wskaźnikami zdarzeń. Spójrz na poniższy kod.
<!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>Wynik
Kliknij brązowe pokrętło na poziomych lub pionowych suwakach, a następnie przeciągnij je, a znajdziesz pozycję kroku i wskazanie zdarzenia dla każdej akcji.