MooTools - Fx.Slide

Fx.Slides é uma opção que permite exibir o conteúdo deslizando para a visualização. É muito simples, mas melhora a aparência de sua IU.

Vamos discutir sobre como criar e inicializar um Fx.Slide, suas opções e métodos.

Primeiro, inicializaremos a classe Fx.Slide com uma instância definida pelo usuário. Para isso, temos que criar e selecionar um elemento HTML. Depois disso, vamos aplicar CSS a esses elementos. Finalmente, iniciaremos uma nova instância de Fx.Slide com nossa variável de elemento.

Opções Fx.Slide

Existem apenas duas opções Fx.Slide - modo e wrapper.

Modo

O modo oferece duas opções, 'vertical' ou 'horizontal'. Revelações verticais de cima para baixo e revelações horizontais da esquerda para a direita. Não há opções para ir de baixo para cima ou da direita para a esquerda, embora eu entenda que hackear a própria classe para fazer isso é relativamente simples. Na minha opinião, é uma opção que eu gostaria de ver padrão, e se alguém hackeado a classe para permitir essa opção, por favor, escreva para nós.

Embrulho

Por padrão, Fx.Slide lança um invólucro ao redor do elemento do slide, dando a ele 'overflow': 'hidden'. Wrapper permite definir outro elemento como wrapper. Como eu disse acima, não tenho certeza de onde isso seria útil e gostaria de ouvir qualquer opinião (obrigado a horseweapon em mooforum.net por me ajudar a esclarecer isso).

Métodos Fx.Slide

Fx.Slide também apresenta muitos métodos para mostrar e ocultar seu elemento.

deslize()

Como o nome indica, este método irá disparar o evento de início e revelar seu elemento.

deslizar para fora()

Desliza seu elemento de volta ao estado oculto.

alternancia()

Isso deslizará o elemento para dentro ou para fora, dependendo de seu estado atual. Método muito útil para adicionar eventos de clique.

ocultar()

Isso ocultará o elemento sem um efeito de slide.

exposição()

Isso mostrará o elemento sem um efeito de slide.

Atalhos Fx.Slide

A classe Fx.Slide também fornece alguns atalhos úteis para adicionar efeitos a um elemento.

definir ('slide')

Em vez de iniciar uma nova classe, você pode criar uma nova instância se 'definir' o slide em um elemento.

Syntax

slideElement.set('slide');

opções de configuração

Você pode até definir opções com o atalho -

Syntax

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

deslizar()

Depois que o slide for .set (), você pode iniciá-lo com o método .slide ().

Syntax

slideElement.slide('in');

.slide vai aceitar -

‘in’
‘out’
‘toggle’
’show’
‘hide’

… Cada um correspondendo aos métodos acima.

Example

Vejamos um exemplo que explica sobre Fx.Slide. Dê uma olhada no código a seguir.

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

Output

Clique nos botões - openA, closeA, openB e closeB. Observe as alterações, efeitos e notificação de eventos nos indicadores.