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.