Fx.Element allows you to add the Fx functionality to multiple dom
elements on a single page. Actually Fx.Element is an extension of the
Fx.Morph plugin. The only difference between Fx.Element and Fx.Morph is
the syntax. In this syntax, the start({}) method is used to create an effect and the .set({}) method is used to set some styles.
Take a look at the following syntax for Fx.Element.
Take a look at the following syntax for Fx.Element.
Syntax
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');
}
});
start({}) and set({})
Start and set keyword structures are used to start and set styles. But in this structure, you refer to the element via the index — the first element is 0, the second is 1, and so on. Take a look at the following syntax for the Start and Set structures.Syntax
//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'
}
});
Example
Let us take an example that explains the Fx.Element. Take a look at the following code.<!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>You will receive the following output −
No comments:
Post a Comment