Share
Commencer avec n'importe quel type de cadre peut être une expérience intimidante. Pour vous aider, nous avons cette semaine un didacticiel approfondi et une longue analyse qui proposent un cours intensif sur cette bibliothèque JavaScript très prisée. Avec autant d’attention portée à jQuery, il est facile d’oublier que Mootools est une bibliothèque non moins puissante avec un énorme succès..
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
Après le transfert initial à Mootools, j'étais frustré par le manque de soutien de la communauté et j'ai fini par revenir immédiatement à Prototype. Après avoir été plus à l'aise avec les frameworks, je suis retourné à Mootools et je n'ai pas regardé en arrière..
Avec ce tutoriel, je vais essayer de vous assurer que vous avez un bon début pour le framework Mootools. Je vais vous expliquer comment télécharger et configurer tous les éléments, ainsi que certains éléments de base de Mootools. Après cela, je vais passer un peu de temps à vous expliquer comment utiliser les documents Mootools, un site que vous visiterez très souvent pendant l'utilisation de Mootools..
Très bien, assez d'histoires, on se salit les mains.
L'avantage de travailler uniquement avec javascript est que nous n'avons pas besoin d'exécuter les fichiers sur un serveur Web ou local. Tout ce dont vous avez besoin pour ce tutoriel est:
Pour ce tutoriel, j'utiliserai Firefox et Firebug pour vous montrer quelques astuces de débogage. Je vous recommande donc d'utiliser firefox ainsi que Firebug. Firebug rendra 100 fois plus facile de travailler avec Mootools ou n’importe quel framework..
Vous pouvez télécharger Firebug ici
Rendez-vous sur www.Mootools.net/download
Pour le moment, nous allons inclure les bibliothèques Core et More. Ceci est juste pour nous assurer que nous ne manquons de rien. Lorsque vous maîtriserez mieux Mootools, vous réaliserez que tous les composants ne sont pas nécessaires à des applications spécifiques. Vous pouvez donc personnaliser la création de bibliothèques Mootools en fonction de vos besoins et conserver une taille de fichier réduite..
Téléchargez le fichier YUI compressé Mootools 1.2.3 et enregistrez-le sur votre bureau..
Passez au constructeur plus, sélectionnez chaque option et téléchargez le fichier YUI compressé.
Créons un nouveau dossier appelé Moo et, à l'intérieur de ce dossier, créons un autre dossier appelé inc. Pour simplifier les choses, créez un fichier supplémentaire dans notre dossier inc appelé js et jetez les deux fichiers Mootools dans ce dossier..
Dans notre dossier Moo, créez un nouveau fichier appelé index.html et ouvrez-le..
Il est ouvert? Bon, maintenant ouvrez-le également dans Firefox. Vous devriez voir une page blanche. Revenez dans votre fichier index.html dans votre éditeur.
Pour inclure Mootools dans notre script, nous devons ajouter 2 lignes de code à votre fichier HTML. Si vous avez déjà inclus un fichier javascript dans un script, il vous sera très familier..
Nous sommes maintenant installés et prêts à partir!
Pour que Mootools parle aux éléments de notre page, nous utilisons la fonction $ () pour obtenir un élément par son ID..
Créons une nouvelle div, donnons-lui un identifiant et du texte, puis invitons Mootools à lui parler.
Après cela, mettons quelques balises javascript pour pouvoir commencer à écrire des Mootools.Salut les gars!
Nous avons créé div et lui avons donné un identifiant de "boîte". Nous avons inséré du texte à l'intérieur et créé des balises de script afin que nous puissions commencer à saisir certaines qualités de Mootools..
Si nous utilisons la fonction $ et passons l’id de notre boîte, nous pouvons voir que Mootools n’obtient pas tous les attributs de notre "boîte" div. Notre élément variable contient maintenant toutes ces données.
Accentsconagua
var element = $ ('box'); Si nous actualisons la page, nous ne pouvons pas voir visiblement que quelque chose se passe, mais nous savons que les choses se passent en arrière-plan. C’est là que console.log () et Firebug entrent en jeu.
Si vous ouvrez Firebug, vous devriez voir une console vierge. En utilisant console.log (), nous pouvons transmettre des informations à Firebug à afficher pour nous. Ceci est extrêmement utile lors du débogage d'un script car vous pouvez l'utiliser pour afficher des informations à différentes étapes de votre script afin de voir en cas d'échec..
console.log ('Oh, salut tout le monde!'); 
Nous pouvons également l'utiliser pour afficher des informations qui ne seraient sinon pas affichées dans notre navigateur..
Permet d’utiliser console.log () pour afficher des informations sur notre "boîte" div.
console.log (élément);
Nous avons donc appris que nous pouvons utiliser $ () pour obtenir un élément, mais que faire si nous voulons obtenir les informations de nombreux éléments. Nous ne voulons pas utiliser 100 instances de $ () qui vont simplement devenir compliquées. C’est là que le $$ () entre en jeu!
Qui a besoin d'un, laisse en avoir beaucoup!
Ajoutons 5 liens à notre page.
Je suis le premier lien
Je suis le deuxième lien
Je suis le troisième lien
Je suis le quatrième lien
Je suis le cinquième lien
… Balises javascript… var links = $$ ('a'); console.log (liens);
Notre variable de liens contient maintenant un tableau de tous nos liens.
Très bien, nous avons donc créé nos éléments et nous avons maintenant Mootools qui leur parle, mais ce n’est pas amusant. L'utilisateur final ne voit aucun changement, aussi allons-nous nous éloigner de ce travail ennuyeux et passer à quelque chose de plus amusant.!
Nous venons de couvrir l’obtention des éléments à l’aide de nos fonctions d’acquisition. Nous pouvons obtenir un seul élément en utilisant $ () et l'ID des éléments. Nous avons également expliqué comment obtenir plusieurs éléments à l'aide de $$ () et du type d'élément.
Lorsque vous utilisez $$ (), vous pouvez transmettre le nom de la balise HTML ou utiliser les sélecteurs de classe CSS pour récupérer un groupe d’éléments. Voici un exemple rapide de saisie de noms de classes..
var elements = $$ ('. myclass'); Cela renverrait un tableau de tous les éléments de la page avec la classe css de "Ma classe".
La théorie est sèche comme un os et c'est à quoi servent les docs, mais vous êtes venus ici pour vous salir les mains, alors laissez-vous salir.
Maintenant que nous obtenons nos éléments, utilisons les fonctions de définition pour manipuler les éléments à l'écran.
Notre "boîte" div est un peu ordinaire alors ajoutons de la couleur. Nous avons déjà défini notre élément dans notre variable d'élément.
element.set ('styles', 'color': 'red'); Nous utilisons notre variable d'élément et nous attachons la fonction set () en utilisant element.set ().
Il y a beaucoup d'arguments que nous pouvons utiliser pour changer notre élément, mais pour le moment nous allons utiliser des styles. Ensuite, nous passons quelques options à notre argument de styles. Nous passons l'option de couleur et définissons notre texte en rouge. Les styles peuvent utiliser toutes les options CSS disponibles. Changeons la couleur de fond pendant que nous sommes ici. N'hésitez pas à jouer avec les styles et à voir à quel point vous pouvez créer notre élément de boîte coloré.
element.set ('styles', 'color': 'rouge', 'background': 'yellow'); Notre "boîte" L'élément n'a pas l'air un peu moins simple. Si nous voulions appliquer de nombreux styles à notre élément box, il pourrait en résulter beaucoup de code inutile. Heureusement, nous pouvons utiliser des styles CSS et un autre argument de définition pour réduire le code. Allez-y et supprimez le code element.set (). Nous allons ajouter des styles css en utilisant inline css.
Remarque: pour simplifier les choses, nous allons écrire notre code CSS dans le fichier. Toutefois, lors de la création d'un site Web, il est recommandé de placer tous vos fichiers CSS et Javascript dans un fichier séparé..
Au dessus de votre "boîte" div permet d'ajouter des balises de style et de créer une classe de .myclass.
Nous pouvons maintenant utiliser set ('style') pour ajouter notre nouveau style à notre élément.
element.set ('class', 'myclass'); 
Quelques autres arguments que nous pouvons utiliser avec set sont HTML et le texte. Quelques exemples de base de ceci sont:
element.set ('html', 'Hé les gars, maintenant je suis audacieux
'); element.set ('text', 'Hé les gars, pas de HTML ici'); L'argument que vous utiliserez dépendra de ce que vous devez utiliser. Si vous n'avez pas besoin de transmettre des valeurs HTML, utilisez du texte et inversement si vous devez transmettre des valeurs HTML..
Nous avons utilisé set () pour ajouter des styles à notre "boîte" div, mais nous aurions pu simplement ajouter la classe à la div en utilisant HTML. Nous n'avons pas vraiment besoin d'utiliser Mootools pour ajouter le style si nous le modifions avant que l'utilisateur ne voie le changement. C'est ici que les événements sont utiles.
Continuons, supprimons tous les liens que nous avons créés et supprimons nos balises javascript..
Votre fichier index.html devrait maintenant inclure uniquement ce code:
Salut les gars!
Créer un nouveau lien et lui donner un identifiant de bouton juste en dessous "boîte" div.
Nous allons maintenant ajouter un événement à ce bouton pour pouvoir exécuter du code lorsqu'un utilisateur clique sur le lien. Nous utilisons addEvent () pour faire cela.
$ ('bouton'). addEvent ('cliquez', fonction (e) ); Nous utilisons la fonction bien connue $ () pour indiquer à Mootools que nous souhaitons parler au lien avec un ID de bouton. Ensuite, nous attachons addEvent () et passons 2 arguments. Le premier argument est l'événement que nous voulons capturer, c'est-à-dire lorsqu'un utilisateur clique sur le lien. Le deuxième argument est une fonction avec une variable de e. Cette fonction va s'exécuter lorsque l'utilisateur clique sur le lien et que la variable de e transmet l'événement. Vous comprendrez pourquoi nous passons une variable avec la fonction à l'étape suivante.
… Dans addEvent… e.stop ();
Nous affectons la fonction stop () à notre variable de e pour arrêter le navigateur lors de l'envoi de l'action de lien. Habituellement, lorsque vous cliquez sur le lien, la page s'actualise et toutes vos modifications sont perdues. e.stop () empêche le navigateur d’actualiser la page afin que nous puissions faire de la magie Mootools!
Maintenant que nous avons Mootools capturer l’événement click, faisons en sorte que Mootools ajoute notre classe de .myclass à notre "boîte" div lorsque le lien est cliqué.
… Dans addEvent ()… element.set ('class', 'myclass'); Enregistrez ceci, actualisez la page et cliquez sur votre lien. En cliquant sur le lien, la div devrait maintenant avoir du style. Nous avons fait tout cela sans avoir à rafraîchir la page. C'est là que Mootools commence à devenir très intéressant.
Petit rappel rapide avant de continuer. Nous avons appris à utiliser les fonctions de lecture ($ et $$) pour permettre à Mootools de parler aux éléments de notre page. Nous avons ensuite appris que nous pouvions utiliser des fonctions de définition pour manipuler ces éléments. Les événements permettent de capturer les interactions de l'utilisateur afin que nous puissions manipuler des éléments en temps réel sans avoir à actualiser la page pour refléter chaque changement..
Mootools vous permettra également de créer de nouveaux éléments à la volée afin de permettre à l'utilisateur de personnaliser la page. Pour ce faire, nous allons utiliser les nouvelles fonctions Element () et inject ().
Commençons par un nouveau fichier HTML. Supprimez tout de index.html ou créez un nouveau fichier.
Dans notre fichier, nous allons créer une div et 2 liens. Allez-y et créez-les maintenant!
Nous allons utiliser le $$ () pour ajouter un événement à nos deux liens sur la page. Nous allons capturer l'événement click, puis créer un nouvel élément. Enfin, nous allons injecter notre nouvel élément dans notre "résultat" div.
$$ ('a'). addEvent ('click', function (e) e.stop ();); Nous utilisons $$ ('a') pour saisir tous les liens, puis attachons addEvent () à chaque lien. Nous faisons cela parce que cela réduit le codage, nous n'avons donc pas besoin de trouver chaque ID des liens et de créer addEvents pour eux. Nous allons utiliser l'ID de chaque lien pour déterminer le style à ajouter. Permet de créer des fichiers CSS rapides pour les boîtes que nous allons créer.
Il est maintenant temps de créer nos éléments et de les insérer dans la page..
var class = this.id; var box = new Element ('div', 'class': class); box.inject ($ ('result')); Tout d'abord, nous créons une variable appelée "classe" maintenez l'ID du lien sur lequel vous avez cliqué. Notre ligne suivante s'occupe de créer l'élément. Nous faisons cela en utilisant new Element (), puis en transmettant des arguments. Le premier argument est le type d'élément que nous voulons créer. Nous voulons créer un div, nous passons donc une valeur de div. La deuxième série est nos options. Nous voulons attribuer une classe différente en fonction du lien sur lequel vous avez cliqué. Nous faisons cela en disant d'abord à la fonction que nous voulons définir le "classe" option, alors nous passons notre variable de classe qui retournera soit "boite bleue" ou "grey_box".
La dernière ligne prend notre nouvel élément, que nous avons placé dans un "boîte" variable et l'injecte dans notre "résultat" div. Mootools sait l'injecter dans "résultat" parce que nous passons le "résultat" div en utilisant une méthode getter comme option principale.
Maintenant, si nous actualisons la page et commençons à cliquer sur nos liens, vous devriez voir que de petites boîtes sont créées à la volée et ajoutées à la page..
À ce stade du didacticiel, vous devriez être assez à l'aise avec l'utilisation des fonctions getter et setter pour que Mootools parle à nos éléments..
Dans la dernière partie de ce didacticiel, je vais aborder certaines des fonctions d’animation et d’effets proposées par Mootools..
Permet de créer un autre nouveau fichier. Dans ce fichier, créez une div avec du texte et un lien..
Salut les gars!
J'ai ajouté des identifiants à chaque élément pour que nous puissions leur parler..
Pour commencer, attachons un événement au lien. Cela devrait sembler très familier maintenant.
$ ('bouton'). addEvent ('cliquez', fonction (e) e.stop ();); Maintenant que Mootools a capturé l’événement click, faisons en sorte que notre "boîte" div fade in et out à chaque clic.
$ ('box'). fade ('bascule'); Maintenant, lorsque nous cliquons sur notre lien, la boîte de dialogue devrait disparaître. Si nous cliquons à nouveau sur le lien, il réapparaîtra..
La décoloration est cool et tout, mais ajoutons un peu de style à la boîte et voyons si nous pouvons la faire pousser!
Nous allons utiliser la fonction tween () pour animer certains attributs de notre "boîte" div.
Dans notre événement click, supprimons la fonction fade () et la remplaçons par tween ().
//$('box').fade('toggle '); $ ('box'). tween ('height', '200'); Maintenant, si nous cliquons sur le lien, notre boîte devrait grandir.
La fonction interpolée prend 2 arguments. Le premier est l'attribut que nous voulons manipuler et le second est une valeur. Nous voulons changer la hauteur de la boîte et l'animer à 200px.
Et si nous voulions que la boîte s'agrandisse de 10 pixels chaque fois que nous cliquions sur le lien. Nous devrions d’abord obtenir la hauteur actuelle de la boîte. Je pense que nous pouvons le faire avec notre fonction getter $ ().
var box = $ ('box'); var height = box.getHeight (); var new_height = height + 10; box.tween ('height', new_height); D'abord nous assignons notre "boîte" div en une variable de box. Ensuite, nous utilisons une fonction intégrée de Mootools appelée getHeight () pour obtenir la hauteur actuelle de notre "boîte" div. Nous voulons que la case grandisse de 10 pixels chaque fois que le lien est cliqué. Nous créons donc une nouvelle variable appelée new_height et lui attribuons une valeur de hauteur + 10. ) fonction à notre variable box, lui dire que nous voulons animer la hauteur et lui passer la valeur de new_height.
Si vous cliquez sur le lien, la case devrait s'agrandir. Si vous cliquez dessus à nouveau, il continuera de croître avec chaque clic de souris.
Mootools possède une section de documents complète sur son site Web. http://Mootools.net/docs/core
Si vous envisagez d'utiliser Mootools, vous vous familiariserez avec cette section de leur site. Il est divisé en différentes classes et fonctions disponibles offertes par Mootools..
La section que vous visiterez le plus sera la section Élément. Cette section contient toutes les informations sur la manière dont Mootools communique et manipule les éléments de la page..
Je vous ai donné de larges traits pour vous aider à vous familiariser avec le fonctionnement de Mootools. Si vous souhaitez continuer à apprendre, je vous suggère de lire quelques pages de la documentation Mootools..
