FAQ MooTools
FAQ MooToolsConsultez toutes les FAQ
Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 15 juin 2021
Sommaire→Introduction
Un Framework JavaScript est un ensemble de composants (de classes, de méthodes) JavaScript appelés bibliothèques (librairies) qui permettent d'accroître et de faciliter l'utilisation du JavaScript. MooTools est un de ces frameworks. Sa performance au niveau de la gestion des styles CSS est un atout. Le rendu des effets visuels est puissant et paramétrable. On y découvre également une facilité au niveau de l'Ajax. Bien entendu, les fonctionnalités sont compatibles sur les grands navigateurs. Plusieurs sites reconnus utilisent MooTools. Citons par exemple : w3c.
Le core, c'est la partie de base de MooTools, son cœur, c'est-à-dire les fonctions natives et courantes comme tout ce qui tourne autour des types de données, des classes, des éléments et même des possibilités de jouer sur les effets de style.
Le more, quant à lui, contient des modules qui vont plus en profondeur. On y parle d'accordéon, de slide, de validation de formulaires, de méthodes complémentaires sur les tableaux, etc. Ce sont des sortes de plugins encapsulant des actions plus complexes.
Dans tous les cas, vous aurez besoin du core dans votre projet. Par contre, vous n'aurez pas nécessairement besoin de son entièreté. Il en est de même avec le more. Effectivement, vous pouvez créer des fichiers personnalisés. C'est à vous de dire quels éléments supplémentaires vous désirez empaqueter. Cette technique permet de réduire la taille du fichier à importer.
Commencez par télécharger sur le site de MooToolsSite officiel - Téléchargement la dernière version core de la bibliothèque. Vous sont proposés plusieurs fichiers. Il y a les versions compressées ou non compressées, ainsi que les versions compatibles MooTools 1.2 et 1.3. Prenez par exemple : mootools-1.4.5-full-compat.js.
Ensuite, dans la balise head de votre page HTML, incluez le script selon l'arborescence de votre projet. Ici, la page HTML est au même niveau que le fichier JavaScript :
<head>
<script type="text/javascript" src="mootools-1.4.5-full-compat.js"></script>
</head>Une fois fait, vous pouvez utiliser la bibliothèque comme bon vous semble dans la page. Toutefois, on conseille d'écrire les instructions lorsque le DOM est chargé (DomReady).
Notez que vous pouvez également mettre une connexion directe vers la source en ligne en passant par Google Ajax Libraries APIGoogle Ajax Libraries API, ce qui vous évitera de devoir télécharger le fichier JavaScript.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
</head>Pour n'inclure que le strict nécessaire, vous pouvez créer votre propre fichier core en cochant les cases adéquates sur cette page : http://mootools.net/core/core. Associé au core, vous pouvez ajouter un fichier more. Et ce fichier, c'est vous qui le constituez avec les modules que vous désirez en cochant les cases adéquates sur cette page : http://mootools.net/more/more.
Contrairement à d'autres frameworks, MooTools propose un gestionnaire d'évènements qui détermine précisément quand le DOM est fonctionnel. Il s'apparente au onload qui vérifie que tous les éléments d'une page sont chargés.
Dans l'exemple ci-dessous, l'alerte se lancera lorsque le DOM sera entièrement parsé :
window.addEvent('domready', function(){
alert('Dom est prêt!');
});Cela vous permet de savoir quand vous pouvez effectivement manipuler l'arbre DOM. On ne parle bien entendu pas des images et d'autres éléments qui apparaissent après. Pour l'exemple, nous avons défini la fonction directement dans le DomReady. Mais nous aurions très bien pu la définir en dehors et puis l'appeler dans le DomReady :
Si jamais il vous vient l'idée saugrenue d'utiliser MooTools en même temps que d'autres bibliothèques JavaScript, vous serez confronté à des conflits au niveau du sélecteur $ parce qu'il est (re)défini dans plusieurs bibliothèques.
MooTools propose sa solution pour gérer les conflits. En fait, le $ est un alias et le vrai sélecteur est en réalité document.id. Donc, remplacez tous vos $ par celui-ci et le tour sera joué (très rapide avec un Rechercher/Remplacer sur "$(") :