Mootools en 30 jours : jour 22 - Plusieurs Morph

I. Introduction aux Morph avec Fx.Elements

Bienvenue à nouveau dans les tutoriels de la série Mootools en 30 jours. Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu le reste de notre série sur mootools . Aujourd'hui, nous allons regarder au plugin Fx.Elements, qui est simplement une extension de Fx.Morph. Au lieu de s'appliquer à un seul élément, Fx.Elements vous permet d'ajouter une fonctionnalité Fx à plusieurs éléménts dom d'un seul coup. Cela peut être très pratique quand vous appliquez les mêmes options à plus d'un élément, comme nous l'avons vu dans l'exemple final dans le jour 20.

II. Explications

Les Bases

Implémenter Fx.Elements ressemble à Fx.Morph. La différence entre les deux ne se voit pas tant que vous n'avez pas utiliser .start({}) sur un effet ou .set({}) pour définir des styles.

Pour que les choses restent simples, définissons d'abord un tableau à passer à Fx.Elements.

var fxElementsArray = $$('.myElementClass');

Maintenant nous pouvons passer notre tableau à l'objet Fx.Elements.

var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Options FX
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
 
//Evenements FX
onStart: function(){
startInd.highlight('#C3E608');
}
});

Tout comme Fx.Morph, Fx.Elements étend la classe Fx, vous donnant accès à toutes les options et évènements FX.

.start({}) et .set({})

Pour démarrer un effet Fx.Elements, ou définir des styles en utilisant Fx.Elements, vous commencez exactement de la même manière que vous l'auriez fait avec Fx.Tween ou Fx.Morph, mais au lieu de définir des paramètres directement sur l'objet Fx.Elements, vous faites référence aux éléments par l'index - le premier élément est 0, le deuxième est 1, et ainsi de suite.

//vous pouvez définir vos styles avec .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
 
//ou créer un effet de transition avec .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});

Tout comme Fx.Morph, vous pouvez définir soit une valeur de début et de fin pour que l'élément fasse une transition, ou vous pouvez juste définir un paramètre simple (comme nous avons fait avec les largeur à 0) et l'élément fera une transition à partir de son état courant vers le nouveau paramètre.

Et c'est à peu près tout ce qu'il y a pour Fx.Elements. Regardez l'exemple ci-dessous pour le voir en action.



Exemple

Ici nous avons appliqué Fx.Elements sur deux éléments. Il y a quelques types de transitions différentes à voir, avec un bouton pause qui vous permet de bloquer la transition.

Tout d'abord, définissons nos éléments, nos boutons de contrôle (cela inclut reset, pause et resume), et quelques indicateurs pour pouvoir mieux suivre le déroulement du processus.

onStart

onCancel

onComplete

onChainComplete








Element 0

Element 1

Notre code css est court et simple.

.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
 
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
 
#buttons {
margin: 20px 0;
display: block;
}

Et maintenant pour la partie Mootools :

var startFXElement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
 
var startFXElementB = function(){
this.start({
'0': {
'width': 500,
'background-color': '#333'
},
'1': {
'width': 500,
'border': '10px solid #DC1E6D'
}
});
}
 
 
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
 
 
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
 
var startInd = $('start_ind');
var cancelInd = $('cancel_ind');
var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind');
 
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Options FX
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
 
//Evenements FX
onStart: function(){
startInd.highlight('#C3E608');
},
onCancel: function(){
cancelInd.highlight('#C3E608');
},
onComplete: function(){
completeInd.highlight('#C3E608');
},
onChainComplete: function(){
chainCompleteInd.highlight('#C3E608');
}
});
 
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
 
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){
fxElementsObject.pause();
});
 
$('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
onStart
onCancel
onComplete
onChainComplete



Element 0
Element 1

III. Conclusion du tutorial

Pour en savoir plus…

Comme vous pouvez le voir, Fx.Elements est très simple. Pour en savoir plus, vous pouvez lire la doc Fx.Element, le Fx.Morph et Fx docs.

En outre, assurez-vous d'avoir lu nos tutoriels sur Fx.Morph et les options et évènement Fx.

Télécharger le fichier zip de l'exemple final

Il contient tout ce dont vou avez besoin pour débuter.

Tutoriel de demain

Fx.Slide