Учебники

MooTools — Fx.Slide

Сентябрь 8, 2018

Fx.Slides — это опция, которая позволяет отображать содержимое, перемещаясь в поле зрения. Это очень просто, но улучшает внешний вид вашего интерфейса.

Давайте поговорим о создании и инициализации Fx.Slide, его опциях и методах.

Сначала мы инициализируем класс Fx.Slide с пользовательским экземпляром. Для этого нам нужно создать и выбрать элемент HTML. После этого мы применим CSS к этим элементам. Наконец, мы запустим новый экземпляр Fx.Slide с нашей переменной элемента.

Опции Fx.Slide

Есть только две опции Fx.Slide — режим и оболочка.

Режим

Режим дает вам два варианта: «вертикальный» или «горизонтальный». Вертикальный показывает сверху вниз, а горизонтальный — слева направо. Нет вариантов идти снизу вверх или справа налево, хотя я понимаю, что взломать сам класс для достижения этого относительно просто. На мой взгляд, это вариант, который я бы хотел видеть стандартным, и если кто-то взломал класс, чтобы разрешить эту опцию, пожалуйста, напишите нам.

обертка

По умолчанию Fx.Slide создает оболочку вокруг элемента слайда, давая ему «переполнение»: «скрытый». Обертка позволяет вам установить другой элемент в качестве оболочки. Как я уже говорил выше, мне неясно, где это пригодится, и было бы интересно услышать какие-либо мысли (спасибо Horseweapon на mooforum.net за помощь в прояснении этого).

Fx.Slide Методы

Fx.Slide также имеет много методов для отображения и скрытия вашего элемента.

slideIn ()

Как следует из названия, этот метод запустит событие start и покажет ваш элемент.

выскользнуть()

Перемещает ваш элемент обратно в скрытое состояние.

Переключатель ()

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

скрывать()

Это скроет элемент без эффекта слайда.

шоу()

Это покажет элемент без эффекта слайда.

Fx.Slide Shortcuts

Класс Fx.Slide также предоставляет несколько удобных ярлыков для добавления эффектов к элементу.

установить ( «слайд»)

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

Синтаксис 

slideElement.set('slide');

настройки параметров

Вы даже можете установить параметры с помощью ярлыка —

Синтаксис 

slideElement.set('slide', {duration: 1250});

горка()

Когда слайд имеет вид .set (), вы можете запустить его с помощью метода .slide ().

Синтаксис 

slideElement.slide('in');

.Slide примет —

  • ‘в’
  • ‘из’
  • «Тумблер»
  • ‘шоу’
  • ‘скрывать’

… каждый из которых соответствует методам выше.

пример

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

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         .ind {
            width: 200px;
            padding: 10px;
            background-color: #87AEE1;
            font-weight: bold;
            border-bottom: 1px solid white;
         }
         .slide {
            margin: 20px 0; 
            padding: 10px;
            width: 200px;
            background-color: #F9E79F;
         }
         #slide_wrap {
            padding: 30px;
            background-color: #D47000;
         }
      </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 slideElement = $('slideA');
            
            var slideVar = new Fx.Slide(slideElement, {
               //Fx.Slide Options
               mode: 'horizontal', //default is 'vertical'
               
               //wrapper: this.element, //default is this.element
               //Fx Options
               link: 'cancel',
               transition: 'elastic:out',
               duration: 'long', 
               
               //Fx Events
               onStart: function(){
                  $('start').highlight("#EBCC22");
               },
               
               onCancel: function(){
                  $('cancel').highlight("#EBCC22");
               },
               
               onComplete: function(){
                  $('complete').highlight("#EBCC22");
               }
            }).hide().show().hide(); //note, .hide and .show do not fire events 

            $('openA').addEvent('click', function(){
               slideVar.slideIn();
            });

            $('closeA').addEvent('click', function(){
               slideVar.slideOut();
            });

            //EXAMPLE B
            var slideElementB = $('slideB');
            var slideVarB = new Fx.Slide(slideElementB, {
            
               //Fx.Slide Options
               mode: 'vertical', //default is 'vertical'
               link: 'chain', 
               
               //Fx Events
               onStart: function(){
                  $('start').highlight("#EBCC22");
               },
               
               onCancel: function(){
                  $('cancel').highlight("#EBCC22");
               },
               
               onComplete: function(){
                  $('complete').highlight("#EBCC22");
               }
            });

            $('openB').addEvent('click', function(){
               slideVarB.slideIn();
            });

            $('closeB').addEvent('click', function(){
               slideVarB.slideOut();
            });
         });
      </script>
   </head>

   <body>
      <div id = "start" class = "ind">Start</div>
      <div id = "cancel" class = "ind">Cancel</div>
      <div id = "complete" class = "ind">Complete</div>
 
      <button id = "openA">open A</button>
      <button id = "closeA">close A</button>

      <div id = "slideA" class = "slide">Here is some content - A. Notice the delay 
         before onComplete fires.  This is due to the transition effect, the onComplete 
         will not fire until the slide element stops "elasticing." Also, notice that 
         if you click back and forth, it will "cancel" the previous call and give the 
         new one priority.</div>
 
      <button id = "openB">open B</button>
      <button id = "closeB">close B</button>

      <div id = "slideB" class = "slide">Here is some content - B. Notice how 
         if you click me multiple times quickly I "chain" the events.  This slide is 
         set up with the option "link: 'chain'"</div>
         
   </body>
</html>

Выход

Нажмите на кнопки — открыть A, закрыть A, открыть B и закрыть B. Наблюдайте за изменениями, эффектами и уведомлениями о событиях на индикаторах.

37
Share: