La méthodologie Mootools
Je reviens donc à quelque chose de plus technique, mais qui doit être lut si vous voulez travailler correctement avec Mootools. Ce framework a une méthodologie qui demande une petite étude. Tentez de toujours la respecter afin d'être standard à Mootools et ainsi pouvoir faire profiter de vos scripts à la communauté. De plus, la maintenance de votre code sera bien plus aisée.
Les éléments
L'un des buts de Mootools est de modifier et animer les éléments. De ce fait, la classe de base que nous manipulons pour ce cas précis est "Element".
Tous les éléments HTML sont alors surchargés pour implémenter la classe "Element". Vous pourrez alors modifier ces objets et implémenter de nouvelles méthodes.
Mootools est livré avec un lots de plugins. Ces plugins surchargent eux-même la classe Element dans certain cas. Notez par exemple makeDraggable qui n'existe que dans le cas où le plugin "drag" est installé (Copix 3 installe tous les plugins de base).
Les arguments en objet
Les fonctions qui peuvent recevoir un grand nombre d'options doit reçevoir un objet. C'est d'ailleurs ce que fait mootools dans la totalité des cas. Par exemple:
$('div1').setStyles({
'font-size': "1em",
'color': "#EEFFEE"
});
De votre coté, voici comment procéder:
function Bar (el,options){
}
Faites des classes
L'intérêt de créer des classes est de pouvoir réutiliser vos scripts sans soucis. De plus, vous pourrez surcharger les classes mootools pour ajouter des méthodes au framework (ce sera alors un plugin).
var MaClass = new Class({
initialize: function(){
//constructor
}
})
Pour respecter le système d'options en objets:
var MaClass = new Class({
options: {
'color': '#AAAAAA',
'message': 'hello !'
},
initialize: function(options){
//constructor
//merge les options par défaut et celles données en paramètre
this.options = $merge(options,this.options);
}
})
Dans ce cas, si nous appelons:
var m = new MaClass({message: 'My new message'});
Les options seront:
{
color: '#AAAAAA',
message: 'My new message'
}
Surcharge de Mootools
Mootools ajoute des méthodes aux éléments, par exemple injectInside, ou setStyles... vous pouvez en ajouter vous même sans avoir à modifier le code du framework. Le principe est simple, implémentons une méthode "mySimpleHello":
Element.implement({
mySimpleHello: function(){
this.setHTML('Hello world');
return this; //un conseil, retournez toujours l'objet pour pouvoir chainer les appels
}
})
De ce fait:
<div id='test'>Un message</div>
<script type="text/javascript">
window.addEvent('domready',function(){
$('test').mySimpleHello();
})
</script>
le contenu du div est immédiatment remplacé par "Hello world". Vous verrez que cela est extrêmement utile quand vous commencerez à maitriser Mootools. Il est toujours plus simple d'appeller une méthode d'un élément HTML plutôt que d'appeler une fonction en envoyant en paramètre l'élément.
les évènements
Il faut éviter d'utiliser les attributs de balise "onClick", ou "onMouseOver"... et utiliser plutôt Mootools pour les définir. Voici des exemples:
$('test').addEvent('mouseenter',function(){}); // la fonction a appelé si la souris entre sur l'élément
$('test').addEvent('mouseleave',function(){}); // la fonction a appelé si la souris sort de l'élément
$('test').addEvent('click',function(){}); // click de la souris sur l'élément
$('test').addEvent('keypress',function(){}); // une touche du clavier est pressée
$('test').addEvent('keyup',function(){}); // une touche du clavier est pressée et relachée
la fonction attend un évènement, il faut le transtyper en évènement mootools et jouer avec le contenu:
$('test').addEvent('keyup',function(e){
e = new Event(e); //transtypage
console.debug(e); //valable si vous utiliser Firebug sur Firefox
if(e.key=='esc'){
//par exemple, si la touche pressée est Echap...
}
});
Maintenant, amusons nous un peu avec les effets