Учебники

MooTools — Слайдеры

Сентябрь 8, 2018

Слайдер — это функциональность, которая отражает действие при перемещении ручки или любой кнопки. Вы можете создать свой собственный слайдер, определяя элементы, обработчик, параметры и события обратного вызова. Давайте обсудим больше о слайдере.

Создание нового слайдера

Сначала мы должны выбрать подходящие элементы HTML для слайдера. Рассматривая основную идею, элементы div наиболее подходят для слайдеров, поскольку с помощью div мы можем создавать дочерние элементы. Теперь мы должны установить CSS для этих элементов div, чтобы сделать структуру div идеальным слайдером. Здесь родительский div предназначен для слайдера, а дочерний div для регулятора .

Теперь мы должны использовать эти div в качестве слайдеров, передавая элементы конструктору Slider как sliderObject и knobObject . Взгляните на следующий синтаксис для определения слайдера.

Синтаксис 

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

Мы также должны определить параметры слайдера.

Параметры слайдера

Давайте обсудим несколько вариантов, которые используются для слайдеров.

Щелчок

Значение привязки может быть истинным или ложным значением. Это определяет, привязывается ли ручка к ступеням при ее перемещении по ползунку. По умолчанию это ложь.

офсет

Это относительное смещение ручки от начальной позиции. Попробуйте поэкспериментировать с этим. По умолчанию это 0.

Спектр

Это очень полезный вариант. Вы можете установить диапазон чисел, на которые разбиваются шаги. Например, если ваш диапазон был [0, 200] и у вас было 10 шагов, ваши шаги были бы на расстоянии 20. Диапазон может также включать отрицательные числа, например [-10, 0], что очень полезно при инвертировании прокрутки. По умолчанию это ложь.

Рулевое колесо

Установите wheel в значение true, и скроллер распознает событие колесика мыши. При использовании колесика мыши вам, возможно, придется отрегулировать диапазон, чтобы гарантировать, что событие колесика мыши не будет отображаться инвертированным (опять же, об этом позже).

меры

По умолчанию 100 шагов очень полезны, так как их легко использовать в процентах. Однако вы можете установить столько шагов (которые можно использовать) в пределах разумного. По умолчанию это 100.

Режим

Режим определяет, будет ли ползунок регистрироваться как вертикальный или горизонтальный. Однако есть еще несколько необходимых шагов для преобразования из горизонтального и вертикального. По умолчанию он горизонтальный.

События обратного вызова

Существует три важных события обратного вызова, которые предоставляет Slider.

по изменению

Любое изменение в текущем шаге запускает выполнение события. Посмотрите пример, приведенный ниже, чтобы увидеть, когда он выполняется.

OnTick

Любое изменение в позиции дескриптора запускает выполнение этого события. Посмотрите пример, приведенный ниже, чтобы увидеть, что это выполняет.

OnComplete

Это событие выполняется всякий раз, когда дескриптор отпускается. Посмотрите пример, приведенный ниже, чтобы увидеть, когда он выполняется.

пример

В следующем примере поясняется горизонтальный и вертикальный ползунок, а также индикаторы событий. Посмотрите на следующий код. 

<!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>

Выход

Нажмите на коричневую ручку на горизонтальном или вертикальном ползунках, затем перетащите ее, вы найдете положение шага и индикацию события для каждого действия.

48
Share: