MooTools - Fx.Slide
Fx.Slides est une option qui vous permet d'afficher le contenu en glissant dans la vue. C'est très simple mais améliore l'apparence de votre interface utilisateur.
Discutons de la création et de l'initialisation d'un Fx.Slide, de ses options et de ses méthodes.
Tout d'abord, nous initialiserons la classe Fx.Slide avec une instance définie par l'utilisateur. Pour cela, nous devons créer et sélectionner un élément HTML. Après cela, nous appliquerons CSS à ces éléments. Enfin, nous lancerons une nouvelle instance de Fx.Slide avec notre variable d'élément.
Options Fx.Slide
Il n'y a que deux options Fx.Slide - mode et wrapper.
Mode
Le mode vous donne deux choix, «vertical» ou «horizontal». Les révélations verticales de haut en bas et horizontales de gauche à droite. Il n'y a pas d'options pour aller de bas en haut ou de droite à gauche, même si je comprends que pirater la classe elle-même pour accomplir cela est relativement simple. À mon avis, c'est une option que je voudrais voir standard, et si quelqu'un a piraté la classe pour autoriser ces options, veuillez nous envoyer une note.
Wrapper
Par défaut, Fx.Slide jette un wrapper autour de votre élément de diapositive, lui donnant «débordement»: «caché». Wrapper vous permet de définir un autre élément comme wrapper. Comme je l'ai dit ci-dessus, je ne sais pas exactement où cela serait utile et je serais intéressé d'entendre des pensées (merci à horseweapon sur mooforum.net pour m'avoir aidé à clarifier cela).
Méthodes Fx.Slide
Fx.Slide propose également de nombreuses méthodes pour afficher et masquer votre élément.
slideIn ()
Comme son nom l'indique, cette méthode déclenchera l'événement de démarrage et révélera votre élément.
glisser()
Ramène votre élément à l'état masqué.
basculer()
Cela fera glisser l'élément vers l'intérieur ou l'extérieur, en fonction de son état actuel. Méthode très utile pour ajouter des événements de clic.
cacher()
Cela masquera l'élément sans effet de diapositive.
spectacle()
Cela montrera l'élément sans effet de diapositive.
Raccourcis Fx.Slide
La classe Fx.Slide fournit également des raccourcis pratiques pour ajouter des effets à un élément.
set ('slide')
Au lieu de lancer une nouvelle classe, vous pouvez créer une nouvelle instance si vous «définissez» une diapositive sur un élément.
Syntax
slideElement.set('slide');options de réglage
Vous pouvez même définir des options avec le raccourci -
Syntax
slideElement.set('slide', {duration: 1250});faire glisser()
Une fois que la diapositive est .set (), vous pouvez la lancer avec la méthode .slide ().
Syntax
slideElement.slide('in');.slide acceptera -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Chacun correspondant aux méthodes ci-dessus.
Example
Prenons un exemple qui explique Fx.Slide. Jetez un œil au code suivant.
<!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
Cliquez sur les boutons - openA, closeA, openB et closeB. Observez les changements, les effets et les notifications d'événements sur les indicateurs.