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.