MooTools - Fx.Slide
Fx.Slides è un'opzione che ti consente di visualizzare il contenuto facendolo scorrere in vista. È molto semplice ma migliora l'aspetto della tua interfaccia utente.
Parliamo della creazione e inizializzazione di un Fx.Slide, delle sue opzioni e dei suoi metodi.
Innanzitutto, inizializzeremo la classe Fx.Slide con un'istanza definita dall'utente. Per questo, dobbiamo creare e selezionare un elemento HTML. Successivamente, applicheremo CSS a questi elementi. Infine, inizieremo una nuova istanza di Fx.Slide con la nostra variabile elemento.
Opzioni Fx.Slide
Ci sono solo due opzioni Fx.Slide: modalità e wrapper.
Modalità
La modalità offre due scelte, "verticale" o "orizzontale". Rivelazioni verticali dall'alto verso il basso e rivelazioni orizzontali da sinistra a destra. Non ci sono opzioni per andare dal basso verso l'alto o da destra a sinistra, anche se capisco che l'hacking della classe stessa per ottenere ciò è relativamente semplice. A mio parere, è un'opzione che vorrei vedere standard e se qualcuno ha violato la classe per consentire queste opzioni, vi preghiamo di inviarci una nota.
Wrapper
Per impostazione predefinita, Fx.Slide crea un wrapper attorno all'elemento diapositiva, dandogli "overflow": "hidden". Wrapper ti consente di impostare un altro elemento come wrapper. Come ho detto sopra, non sono chiaro su dove questo potrebbe tornare utile e sarei interessato a sentire qualsiasi pensiero (grazie a horseweapon su mooforum.net per avermi aiutato a chiarire questo).
Metodi Fx.Slide
Fx.Slide offre anche molti metodi per mostrare e nascondere il tuo elemento.
slideIn ()
Come suggerisce il nome, questo metodo attiverà l'evento di inizio e rivelerà il tuo elemento.
sfilare()
Riporta il tuo elemento allo stato nascosto.
toggle ()
Questo farà scorrere l'elemento dentro o fuori, a seconda del suo stato corrente. Metodo molto utile per aggiungere agli eventi di clic.
nascondere()
Ciò nasconderà l'elemento senza un effetto diapositiva.
spettacolo()
Questo mostrerà l'elemento senza un effetto diapositiva.
Scorciatoie Fx.Slide
La classe Fx.Slide fornisce anche alcune utili scorciatoie per aggiungere effetti a un elemento.
set ('slide')
Invece di iniziare una nuova classe, puoi creare una nuova istanza se "imposti" la diapositiva su un elemento.
Syntax
slideElement.set('slide');opzioni di impostazione
Puoi anche impostare le opzioni con la scorciatoia:
Syntax
slideElement.set('slide', {duration: 1250});diapositiva()
Una volta che la diapositiva è .set (), puoi avviarla con il metodo .slide ().
Syntax
slideElement.slide('in');.slide accetterà -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
... ciascuno corrispondente ai metodi sopra.
Example
Facciamo un esempio che spieghi Fx.Slide. Dai un'occhiata al codice seguente.
<!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
Fare clic sui pulsanti: openA, closeA, openB e closeB. Osservare le modifiche, gli effetti e la notifica degli eventi sugli indicatori.