FAQ MooToolsConsultez toutes les FAQ

Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 2 septembre 2018 

 
OuvrirSommaireIntroduction

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.

Créé le 31 décembre 2010  par vermine

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.

Créé le 1er décembre 2012  par vermine

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 :

 
Sélectionnez
<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.

 
Sélectionnez
<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.

 
Sélectionnez
<head>
   <script src="js/mootools-core.js"></script>
   <script src="js/mootools-more.js"></script>
</head>
Mis à jour le 1er décembre 2012  par vermine

Lien : Quelle est la différence entre le core et le 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é :

 
Sélectionnez

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 :

 
Sélectionnez

function maFonction()
{
   alert('Dom est prêt!');
}

window.addEvent('domready', function(){
    maFonction();
});
Créé le 31 décembre 2010  par vermine

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 "$(") :

 
Sélectionnez
var test = $('mon_id');
//devient
var test = document.id('mon_id');
Créé le 3 novembre 2011  par vermine
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.