Share
Croyez-le ou non, il y a beaucoup d'interactivité puissante que vous pouvez apporter à votre site en utilisant javascript en plus de menus de navigation astucieux! Ce didacticiel vous aidera à trouver votre vache intérieure en vous présentant l'une des bibliothèques javascript les plus puissantes et les plus modulaires, MooTools! Nous allons créer un outil flexible pour mettre en évidence les produits ou services de vos sites à l’aide de la structure javascript de MooTools. Découvrez également les nombreuses raisons pour lesquelles MooTools pourrait bien être la bonne bibliothèque javascript pour tous vos projets futurs.!
Voici donc ce que nous construisons, c’est un mécanisme de basculement intelligent qui fonctionne très bien comme surligneur de produit..
Je sais ce que vous pensez… Qu'est-ce que MooTools pourrait éventuellement offrir et qui pourrait m'obliger à rompre ma relation de longue date avec jQuery-Or Prototype et Scriptaculous?!
L’un des plus gros problèmes que j’ai rencontrés avec jQuery dans le passé est le fait que bon nombre de leurs plugins sont créés et développés indépendamment, ce qui signifie: vous faites confiance à un étranger pour le mettre à jour activement. car la bibliothèque jQuery continue de publier des versions de plus en plus récentes. Lorsque cela échoue (et souvent, cela arrive), vous vous retrouverez à chercher la version appropriée de la bibliothèque principale qui permettra à votre script de fonctionner correctement.!
Peut-être que Prototype et son partenaire bien connu dans le crime, Scriptaculous, sont plus votre style. Dans ce cas particulier, vous serez privé de votre droit à la modularité et vous serez obligé d'inclure deux bibliothèques de taille corpus sur toutes vos pages, voire dans certains cas un fichier de plugin.!
Donc, si MooTools est si génial, alors… pourquoi ne l'utilise-t-il pas davantage? Pourquoi n'y a-t-il pas des millions de tutoriels et de livres sur chaque étagère de la bibliothèque?! Il y a une poignée de raisons:
Cependant, vous trouverez de nombreux outils pour travailler avec des zones de script plus uniques, telles que l'analyse de fichiers JSON, les cookies et l'intégration Flash, pour en nommer quelques-uns. En outre, une page de téléchargement pratique vous permettant de choisir exactement ce dont vous avez besoin pour votre projet afin de vous assurer la plus petite taille de fichier possible..
Rendez-vous sur la page MooTools Core Builder! Pour ce projet particulier, vous voudrez sélectionner Fx.Morph, Element.Event, DomReady, et Sélecteurs et cliquez sur "Télécharger" en utilisant YUI Compressor. Toutes les dépendances sont automatiquement choisies pour vous. Attention, certains navigateurs ajouteront une extension ".txt" à un fichier javascript pour votre protection. Ceci devra évidemment être supprimé, et n'hésitez pas à supprimer certains caractères costauds dans le nom du fichier..
Créez le document HTML que vous utiliserez pour ce projet et attachez la bibliothèque MooTools. Ma tête de page ressemble à ceci:
Mootools - Produits phares! …
Jetez un coup d’œil aux styles et HTML suivants pour voir comment j’ai aménagé la page..
Code CSS:
Code HTML:
Remarquez comment j'ai le HTML aménagé. Je n'utiliserai pas d'ID pour sélectionner les éléments de page ou les bulles, mais créerai des tableaux de tous les éléments contenant les deux classes, ce qui permettra à ce script de s'adapter, quel que soit le nombre d'éléments que vous choisissez de mettre en surbrillance! Toutes les bulles et les pages sont contenues dans un wrapper qui est absolument positionné dans le wrapper du site (qui contient notre fond où tout cela est assis au-dessus de).
Nous allons commencer par créer une fonction wrapper pour notre code javascript qui place un écouteur d'événements sur l'objet window et se déclenche une fois que le DOM est chargé et prêt. Ceci est important car nous avons besoin que notre script commence immédiatement à modifier le DOM dès qu'il est disponible..
Si nous n'utilisons PAS cette fonction d'emballage, il est fort probable que vous obtiendrez des erreurs indiquant que certains éléments n'existent pas. Une autre option pourrait être de placer le code JavaScript intégré à la fin du corps du document. Cependant, si vous décidez de joindre le script en externe, vous rencontrez ce problème une fois de plus, c'est donc une bonne habitude à prendre maintenant.!
Une autre option pour 'domready' consiste à utiliser 'load' qui se déclenchera une fois la page (images incluses) complètement chargée. Nous ne voulons pas de cela pour ce projet en particulier, car cela signifie que des images (telles que nos bulles) risquent de clignoter à l'écran avant d'être masquées par notre script..
Une autre chose importante à noter: si vous décidez de lier ce script à partir d'un fichier '.js' externe, vous voudrez vous assurer de le lier APRÈS que vous ayez lié la bibliothèque MooTools dans l'en-tête du document..
Accentsconagua
window.addEvent ('domready', function () …); Ensuite, nous commençons par créer les tableaux pour nos éléments page et bulle et définir quelques styles en ligne initiaux..
window.addEvent ('domready', function () // Crée des variables (dans ce cas deux tableaux) représentant nos bulles et nos pages var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Définissez l'opacité des bulles à zéro de sorte qu'elles soient initialement masquées // et rétablissent la visibilité de leur conteneur dans myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilité', 'visible')); Enfin, nous attacherons des écouteurs d’événements aux icônes de page pour déclencher des effets de morphing sur les bulles correspondantes. Notez que l'ordre des bulles tel qu'il est présenté dans le code HTML est le même ordre que celui des icônes de page. C'est important!
window.addEvent ('domready', function () // Crée des variables (dans ce cas deux tableaux) représentant nos bulles et nos pages var myPages = $$ ('. page'); var myBubbles = $$ ('. bubble' ); // Définissez l'opacité des bulles à zéro de sorte qu'elles soient initialement masquées // et rétablissent la visibilité de leur conteneur dans myBubbles.setStyle ('opacity', 0); $ ('bubbleWrap'). SetStyle ('visibilité', 'visible') // Ajoute nos événements aux pages myPages.each (function (el, i) / * Nous modifions ici la propriété 'link' par défaut en 'cancel' pour nos effets de morphing, ce qui garantit que les effets sont interrompus lorsque la la souris quitte et entre pour commencer immédiatement l’effet de morphing appelé * / el.set ('morph', link: 'cancel'); el.addEvents ('mouseenter': function () myBubbles [i]. morph ('opacity': 1, 'margin-top': '-15px');, 'mouseleave': function () myBubbles [i] .morph ('opacity': 0, 'margin-top ': 0);););); Vous remarquerez que nous attachons une fonction utilisant la méthode each () à tous les éléments du tableau 'myPages'. Et pour chaque fonction, nous passons in «el» qui représente l'élément de page et «i» qui est un entier représentant l'emplacement de cet élément de page dans son tableau. Nous utilisons la variable 'i' pour appeler l'effet morph sur l'élément bulle approprié et correspondant dans le tableau 'myBubbles'.
Et c'est tout! Assez indolore n'est-ce pas? Veillez à visionner la démo en cours d’utilisation et à mettre en signet la page Documents MooTools et la page de téléchargement MooTools pour référence future! J'espère que ce tutoriel vous a été utile et qu'il me tarde de mettre au point quelque chose d'un peu plus avancé dans un avenir proche en utilisant la puissance des classes MooTools.!
