MooTools - Fx.Slide

Fx.Slides es una opción que le permite mostrar el contenido deslizándose hacia la vista. Es muy simple pero mejora el aspecto de su interfaz de usuario.

Discutamos sobre la creación e inicialización de un Fx.Slide, sus opciones y métodos.

Primero, inicializaremos la clase Fx.Slide con una instancia definida por el usuario. Para eso, tenemos que crear y seleccionar un elemento HTML. Después de eso, aplicaremos CSS a estos elementos. Finalmente, iniciaremos una nueva instancia de Fx.Slide con nuestra variable de elemento.

Opciones de Fx.Slide

Solo hay dos opciones de Fx.Slide: modo y contenedor.

Modo

El modo le ofrece dos opciones, 'vertical' u 'horizontal'. Revelaciones verticales de arriba a abajo y revelaciones horizontales de izquierda a derecha. No hay opciones para ir de abajo hacia arriba o de derecha a izquierda, aunque entiendo que piratear la clase en sí para lograr esto es relativamente simple. En mi opinión, es una opción que me gustaría ver como estándar, y si alguien ha pirateado la clase para permitir estas opciones, por favor envíenos una nota.

Envoltura

De forma predeterminada, Fx.Slide arroja un contenedor alrededor de su elemento de diapositiva, dándole 'desbordamiento': 'oculto'. Wrapper le permite establecer otro elemento como envoltorio. Como dije anteriormente, no tengo claro dónde sería útil esto y estaría interesado en escuchar cualquier pensamiento (gracias a horseweapon en mooforum.net por ayudarme a aclarar esto).

Métodos Fx.Slide

Fx.Slide también presenta muchos métodos para mostrar y ocultar su elemento.

en este lado()

Como su nombre lo indica, este método activará el evento de inicio y revelará su elemento.

deslice()

Desliza tu elemento de regreso al estado oculto.

palanca()

Esto deslizará el elemento hacia adentro o hacia afuera, dependiendo de su estado actual. Método muy útil para agregar eventos de clic.

esconder()

Esto ocultará el elemento sin un efecto de diapositiva.

show()

Esto mostrará el elemento sin efecto de diapositiva.

Atajos de Fx.Slide

La clase Fx.Slide también proporciona algunos atajos útiles para agregar efectos a un elemento.

set ('deslizar')

En lugar de iniciar una nueva clase, puede crear una nueva instancia si 'establece' la diapositiva en un elemento.

Syntax

slideElement.set('slide');

opciones de configuración

Incluso puede configurar opciones con el acceso directo:

Syntax

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

diapositiva()

Una vez que la diapositiva es .set (), puede iniciarla con el método .slide ().

Syntax

slideElement.slide('in');

.slide aceptará -

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

… Cada uno correspondiente a los métodos anteriores.

Example

Tomemos un ejemplo que explique sobre Fx.Slide. Eche un vistazo al siguiente código.

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

Haga clic en los botones: abrirA, cerrarA, abrirB y cerrarB. Observe los cambios, el efecto y la notificación de eventos en los indicadores.