MooTools - Fx.Element
Fx.Element vous permet d'ajouter la fonctionnalité Fx à plusieurs éléments dom sur une seule page. En fait, Fx.Element est une extension du plugin Fx.Morph. La seule différence entre Fx.Element et Fx.Morph est la syntaxe. Dans cette syntaxe, lestart({}) est utilisée pour créer un effet et la méthode .set ({}) est utilisée pour définir certains styles.
Jetez un œil à la syntaxe suivante pour Fx.Element.
Syntaxe
var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});démarrer ({}) et définir ({})
Les structures de mots-clés Démarrer et définir sont utilisées pour démarrer et définir des styles. Mais dans cette structure, vous faites référence à l'élément via l'index - le premier élément est 0, le second est 1, et ainsi de suite. Jetez un œil à la syntaxe suivante pour les structures Start et Set.
Syntaxe
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});Exemple
Prenons un exemple qui explique le Fx.Element. 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;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
</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">
var startFXElement = function(){
this.start({
'0': {
'height': [50, 100],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 300,
'background-color': '#333'
},
'1': {
'width': 300,
'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, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
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();
});
});
</script>
</head>
<body>
<div id = "start_ind" class = "ind">onStart</div>
<div id = "cancel_ind" class = "ind">onCancel</div>
<div id = "complete_ind" class = "ind">onComplete</div>
<div id = "chain_complete_ind" class = "ind">onChainComplete</div>
<span id = 'buttons'>
<button id = "fxstart">Start A</button>
<button id = "fxstartB">Start B</button>
<button id = "fxset">Reset</button>
<button id = "fxpause">Pause</button>
<button id = "fxresume">Resume</button>
</span>
<div class = "myElementClass">Element 0</div>
<div class = "myElementClass">Element 1</div>
</body>
</html>Vous recevrez la sortie suivante -