Visualisation d'une page Webjax
Présentation globale du framework Mootools
Cette page est propulsée par 
.
Cette page vous permet de prendre connaissance d'un nouveau framework Javascript au sein de Webjax.eu, framework nommé
"Mootools". Ce framework se présente comme une synthèse au sein d'une même entité des librairies Prototype.js et
Scriptaculous.js aussi présentées dans le cadre de Webjax.eu .
Ce framework est développé par Valerio Proietti.
Ce nouveau framework Mootools présente une structure spécifique ne reprenant pas les principes des librairies
Prototype.js et Scriptaculous. Cette nouvelle structure, bien que peut être contraignante à adopter pour des développeurs
ayant déjà développés plusieurs outils AJAX, web2.0 avec Prototype.js ou Scriptaculous.js, apparaît néanmoins plus logique
pour qui veut aujourd'hui commencer sur de l'AJAX et sur des effets graphiques au sein d'interfaces web-based en ayant au
préalable une connaissance de la programmation orientée objet.
Vous pouvez accéder au site officiel de Mootools et
y consulter la documentation anglophone officielle
qui vous permettra de démarrer rapidement si vous êtes déjà familier du code Javascript et de la programmation orientée objet.
Vous pouvez télécharger le framework Mootools (version 1.11 ou 1.2 beta 1 ce jour 2007/12/17), selon un système que l'on pourrait qualifier de
"à la carte" qui est présenté au sein d'un contexte CSS très agréable tout en nuances de noir avec des beaux icônes.
Un petit bémol tout de même sur la non présence de versions "toutes-faites" comme "full" par exemple.
Donc pour télécharger votre fichier "mootools.js" à inclure dans vos pages et compilé au sein d'un seul fichier, vous sélectionnez toutes les
parties dont vous avez besoin et vous cliquez sur "downloader". Le serveur Mootools vous renverra votre fichier "mootools.js" personnalisé, répondant
à votre demande et à vos besoins spécifiques (ndr : c'est beau l'objet ;-) ).
En version "full" c'est à dire avec tous les objets inclus, en version 1.11, mootools pèse 43ko. Le fichier qui vous est renvoyé en
mode de compression maximale "Javascript Packed" ne peut décemment être modifié. Privilégiez un autre type de compression si vous
souhaitez modifier directement le code source de Mootools ;-)
Pour ceux que la lecture de ces pages de documentation rebuteraient, nous vous proposons au sein de Webjax.eu une présentation détaillée
par objet du framework Mootools.
Nous commençons cette présentation par l'index des objets et sous-objets principaux du framework Mootools afin que vous
puissiez avoir une vision d'ensemble du framework :
Nom schématique
Nom du fichier
Description, détails
Core
Core.js
Fichier racine du framework Mootools. Il définit des fonctions, méthodes essentielles au fonctionnement
du framework. Il permet notamment l'utilisation d'une méthode '$type' qui permet de définir le type d'une
variable Javascript. A noter aussi la présence d'une méthode permettant de réinitialiser une action de type
'delay'. On peut aussi noter la présence de la classe 'window' qui ajoute des propriétés à l'objet 'js.window'.
Ces propriétés concernent la détection de navigateur qui est dès lors extrèmement facilitée.
Class
Class.js
Ce fichier contient la classe 'Class' (;-)) qui permet de contenir des objets "taillés" pour le framework
Mootools. Ce fichier contient deux méthodes pour les objets basiques Mootools à savoir "extend" et "implement"
qui permettent respectivement d'étendre un objet dans un autre et d'implémenter, au moins, une fonction/méthode
dans un objet existant.
Class
Class.Extras.js
Fichier qui contient deux classes dites 'Extra' pour les modèles objets basiques Mootools.
'Chain' qui est une classe permettant notamment de "chaîner" plusieurs exécutions de méthodes
(ndr : utiles pour le déroulement d'effets par exemple), et "Events" qui peut notamment être utilisée
de la même façon que dans l'exemple précédent à savoir pour définir une succession d'évènements
apparaissant lors d'un effet (ndr : FX, voir plus bas dans le tableau).
Native
Array.js
Ce fichier définit la notion de 'Array' soit 'tableau' en français au sein de Mootools Framework.
On note par exemple la présence de "foreach" qui permet de boucler en structure objet sur un tableau.
On peut aussi noter la présence de "filter" qui permet d'extraire par exemple des valeurs d'un tableau
selon un critère numérique de valeur. Les 'Array' peuvent utiliser leur méthode 'copy()' pour se dédoubler
au sein d'une nouvelle variable.
Native
Function.js
Ce fichier définit les modèles des fonctions/méthodes au sein du framework Mootools.
La documentation officielle précise que des méthodes sont inspirées directement de
Prototype.js dont la description est faite au sein des pages de Webjax.eu
Native
Number.js
Ce fichier définit l'entité "Number" et quelques méthodes dont deux de conversion directe
(int et float).
Native
String.js
Ce fichier définit l'entité "String" au sein de Mootools. Comporte des méthodes intéressantes
dont deux de conversion directe (int et float depuis string), un "trim()", des méthodes de conversion
des codes couleurs (appréciable) et diverses autres méthodes.
Native
Element.js
Ce fichier définit deux classes principales "Element" et "Elements" et une série de méthodes
pour les "Element" récupérés via l'utilisation du '$' par exemple. On trouve des méthodes permettant
d'insérer des éléments précédemment et ultérieurement à un, des autres, on peut utiliser via des méthodes
claires des fonctionnalités permises par Javascript au prix de quelques lignes supplémentaires.
Element
Element.Selector.js
Ce fichier définit deux opérateurs '$E' et '$ES' qui permettent de rechercher et sélectionner
rapidement des éléments DOM au sein d'une structure DOM. Des méthodes (4) sont aussi définies
afin de permettre d'approfondir la recherche d'éléments DOM au sein d'éléments DOM précisés (ndr :
study case : sélection avec '$' d'un élement DOM, utilisation de "getElements()" pour sélectionner,
éventuellement avec regexp d'autres éléments DOM).
Element
Element.Filter.js
Ce fichier définit des méthodes pour "Element" permettant de placer des filtres sur des collections
d'éléments DOM réunis en un sein unique à l'aide de l'opérateur '$$'.
Element
Element.Form.js
Fichier qui définit deux méthodes permettant d'influer sur les données présentes au sein de 'form'.
'Element.Form.toQueryString()' permet de synthétiser à la manière de 'Form.serialize()' en Prototype.js,
les données d'un formulaire sous une chaîne de caractères intelligible.
Il est précisé que cette méthode est automatiquement utilisée dans 'Ajax' (ndr : voir plus bas dans le tableau).
Element
Element.Event.js
Fichier qui définit l'entité "Event" au sens de Mootools. On peut notamment noter une gestion optimisée des codes clavier
utilisés, l'intégration au sein de l'objet des valeurs globales comme les dernières coordonnées clickées, les données
concernant 'wheeling' de la souris etc.
Amusant et utile on peut aussi noter la possibilité d'affecter des évènements au clavier. "whatever" ou à la touche du clavier
vous pouvez linker des évènements directement via la structure objet.
Element
Element.Dimensions
Fichier qui définit des méthodes pour permettre la gestion des notions de dimensionnement liés aux éléments DOM.
Le fichier définit aussi des méthodes permettant d'influer sur le "scroll" de la page de navigateur ou le placement
précis d'un élément DOM.
Window
Window.DomReady
Fichier qui définit la possibilité pour le développeur d'ajouter un évènement 'domready' à l'objet 'window'.
Cet évènement est 'fired' lorsque la structure DOM du document a été chargée (ndr : ne tient donc pas compte
des images).
Window
Window.Size
Fichier qui permet d'implémenter "pour la forme" des valeurs renvoyés par les objets Javascript de base.
Les valeurs concernent les dimensions de la page en cours.
Remote
XHR.js
Fichier qui définit la base des requêtes XMLHttpRequest asynchrones. Permet de lancer une requête vers un serveur
avec éventuellement des précisions au niveau des headers.
Remote
Ajax.js
Fichier qui définit l'objet 'Ajax' qui sera utilisé communément par beaucoup de développeurs pour intégrer
les nouvelles interfaces web-based. Cet objet 'Ajax' reprend les concepts de celui développé avec ses sous-objets
au sein de Prototype.js . A noter quand même qu'il est possible via 'Element' d'effectuer un 'send()' sur un '(X)HTML.form'
ce qui a pour effet de poster le formulaire via une requête AJAX.
Remote
Assets.js
Fichier qui définit des méthodes permettant de charger/loader dynamiquement au sein d'une structure DOM des fichiers de type
images, css ou javascript. Encore une fois, il est clairement possible d'effectuer ces inclusions de façon "manuelle" mais la formalisation
"objet" et l'aisance d'accès rendent ces méthodes utiles.
Remote
Cookie.js
Fichier qui définit un objet bien utile et bienvenu qui permet de gérer de façon "objet" les cookies Javascript (ndr : donc côté client).
Ce fichier permet d'utiliser optimalement (ndr : du point de vue de l'auteur les fonctionnalités basiques de Javascript).
La documentation officielle précise que ces méthodes sont dérivées de QuirksMode.
Remote
Json.js
Fichier définissant un "outil" permettant de créer à partir de strings formattées JSON des objets ou inversement (ndr : créer des strings
à partir des objets).
Remote
Json.Remote.js
Fichier qui définit l'objet permettant de réaliser automatiquement un appel XHR qui est voué à lire du code JSON.
L'objet est taillé pour pouvoir définir des fonctions/méthodes lors des évènements de retour de l'appel XHR.
Effects
Fx.Base.js
Ce fichier définit les informations/paramètres de base ainsi que les méthodes basiques pour gérer les effets graphiques
au sein de structures DOM. On retrouve les mêmes concepts que dans Scriptaculous mais le tout est plus aisé à gérer du fait
de la structure objet claire et syntéthique.
Effects
Fx.CSS.js
Ce fichier ne fait pas l'objet d'une documentation en ligne. Il est précisé que cet objet sert au sein de Fx.Style, Fx.Styles
et Fx.Elements.
Effects
Fx.Style.js
Ce fichier définit l'objet qui permet réellement de commencer à appliquer des effets en manipulant des attributs CSS.
Effects
Fx.Styles.js
Fichier qui définit l'objet permettant d'appliquer des effets sur plusieurs propriétés CSS simultanément.
Effects
Fx.Elements.js
Fichier qui définit l'objet qui permet d'effectuer des effets ou une série d'effets sur plusieurs éléments DOM
simultanément. Exemple intéressant que celui présenté dans la documentation officielle permettant d'appliquer un
effet à tous les liens hypertextes "(X)HTML.a" .
Effects
Fx.Scroll.js
Il est important de noter que cet effet nécessite la présence d'une 'doctype' XHTML.
Cet objet permet de réaliser des "scrollings" sur des éléments DOM avec "overflow" et y
compris l'élément 'window'.
Effects
Fx.Slide.js
Fichier qui définit l'objet permettant de réaliser des "sliders". Le contenu "slide"
horizontalement ou verticalement.
Effects
Fx.Transitions.js
Fichier qui définit les différents effets de type "transition" applicables via Mootools.
La liste est différente et peut être plus explicite que celle présente au sein de Scriptaculous
dans les objets de même destination.
Drag
Drag.Base.js
Fichier qui définit les méthodes basiques pour gérer le concept de "Drag ou Glissement" d'éléments DOM.
L'objet permet de définir assez précisement le champ d'actions des actions réalisables.
Drag
Drag.Move.js
Fichier qui définit l'objet permettant de réaliser des actions de "drag" plus poussées.
Ce fichier permet notammnet le "snapping" et les éléments dits "droppables", c'est à dire
des éléments ou l'on "lâche" d'autres éléments via une action de "drag".
Il est important de noter que ce type de fonctionnalités nécessite une doctype de type XHTML.
Un élément peut être rendu "draggable" via une propriété "Element.makeDraggable".
Plugins
Hash.js
Fichier définissant un objet "Hash" permettant de créer des chaînes de type de celles à envoyer
au constructeur JSON.
Plugins
Hash.Cookie.js
L'objet définit par ce fichier permet de gérer optimalement dans des cookies des objets type JSON
dont la création/interprétation semble être faite via "Hash". Ce type de fonctionnalité peut se révéler
extrèmement intéressante notamment au sein de sites comme Webjax.eu qui ne nécessite pas d'inscriptions
mais tolère la gestion de favoris.
Plugins
Color.js
L'objet définit par ce fichier permet de gérer optimalement via un objet complet et dédié
les problématiques liés à l'utilisation de différents formats de couleurs.
Plugins
Group.js
Fichier qui permet de définir un "groupe" de requêtes XHR/AJAX. La gestion via un groupe, permet de s'assurer
par exemple de la fin de chargement de l'ensemble des requêtes XHR/AJAX et non une à une comme il conviendrait
de faire par exemple via Prototype.js
Plugins
Scroller.js
Cet objet permet de "scroller" un élément DOM, inclusion faite de l'élément 'window', lorsque le curseur de la souris
atteint certaines zones définies du dit élément. Il est noté que la méthode 'Scroller.start()' doit être appelée afin
de commencer le 'listening'.
Plugins
Slider.js
Cet objet nécessite une doctype XHTML pour fonctionner.
L'objet permet de créer un "slider" à deux éléments, un "knob" et un "container".
Plugins
SmoothScroll.js
Objet qui permet d'indexer toutes les "anchors/ancres" dans une structure DOM et de proposer un effet
de scrolling "smooth" pour les atteindre lors de clicks utilisateurs en ce sens.
Plugins
Sortables.js
Cet objet définit les fonctionnalités nécessaires pour rendre une liste "sortable" c'est à dire "triable" à la manière
de ce qui existe dans Scriptaculous.js .
Plugins
Tips.js
Cet objet nécessite une doctype XHTML. L'objet apporte les fonctionnalités nécessaires pour la définition et gestion
en terme d'apparition de 'tooltips ou messages d'aides' personnalisés qui tranchent (niarf) avec le format standard
de ce type de bulles infos.
Plugins
Accordion.js
L'objet nécessite l'utilisation d'une doctype XHTML.
L'objet permet de réaliser à partir d'élements DOM des "Accordion" qui sont des éléments d'interface "empilés" avec une occurence au contenu
visible, les autres occurences pouvant être chargées via un click sur les titres. Le choix d'une nouvelle occurence provoque la disparition
de l'ancienne occurence visible.
Le tableau ci-avant a donc défini l'ensemble des objets présents au sein du framework Mootools (ndr : au 2007/12/17) dans sa version 1.11.
Nous allons tenter de vous présenter au sein de la liste de pages de la rubrique Webjax.eu consacrée à Mootools des exemples concrets d'utilisation
du framework afin de faciliter les intégrations que vous souhaiteriez réaliser.
.
Cette page vous permet de prendre connaissance d'un nouveau framework Javascript au sein de Webjax.eu, framework nommé "Mootools". Ce framework se présente comme une synthèse au sein d'une même entité des librairies Prototype.js et Scriptaculous.js aussi présentées dans le cadre de Webjax.eu .
Ce framework est développé par Valerio Proietti.
Ce nouveau framework Mootools présente une structure spécifique ne reprenant pas les principes des librairies Prototype.js et Scriptaculous. Cette nouvelle structure, bien que peut être contraignante à adopter pour des développeurs ayant déjà développés plusieurs outils AJAX, web2.0 avec Prototype.js ou Scriptaculous.js, apparaît néanmoins plus logique pour qui veut aujourd'hui commencer sur de l'AJAX et sur des effets graphiques au sein d'interfaces web-based en ayant au préalable une connaissance de la programmation orientée objet.
Vous pouvez accéder au site officiel de Mootools et y consulter la documentation anglophone officielle qui vous permettra de démarrer rapidement si vous êtes déjà familier du code Javascript et de la programmation orientée objet.
Vous pouvez télécharger le framework Mootools (version 1.11 ou 1.2 beta 1 ce jour 2007/12/17), selon un système que l'on pourrait qualifier de "à la carte" qui est présenté au sein d'un contexte CSS très agréable tout en nuances de noir avec des beaux icônes.
Un petit bémol tout de même sur la non présence de versions "toutes-faites" comme "full" par exemple.
Donc pour télécharger votre fichier "mootools.js" à inclure dans vos pages et compilé au sein d'un seul fichier, vous sélectionnez toutes les parties dont vous avez besoin et vous cliquez sur "downloader". Le serveur Mootools vous renverra votre fichier "mootools.js" personnalisé, répondant à votre demande et à vos besoins spécifiques (ndr : c'est beau l'objet ;-) ).
En version "full" c'est à dire avec tous les objets inclus, en version 1.11, mootools pèse 43ko. Le fichier qui vous est renvoyé en mode de compression maximale "Javascript Packed" ne peut décemment être modifié. Privilégiez un autre type de compression si vous souhaitez modifier directement le code source de Mootools ;-)
Pour ceux que la lecture de ces pages de documentation rebuteraient, nous vous proposons au sein de Webjax.eu une présentation détaillée par objet du framework Mootools.
Nous commençons cette présentation par l'index des objets et sous-objets principaux du framework Mootools afin que vous puissiez avoir une vision d'ensemble du framework :
| Nom schématique | Nom du fichier | Description, détails |
| Core | Core.js | Fichier racine du framework Mootools. Il définit des fonctions, méthodes essentielles au fonctionnement du framework. Il permet notamment l'utilisation d'une méthode '$type' qui permet de définir le type d'une variable Javascript. A noter aussi la présence d'une méthode permettant de réinitialiser une action de type 'delay'. On peut aussi noter la présence de la classe 'window' qui ajoute des propriétés à l'objet 'js.window'. Ces propriétés concernent la détection de navigateur qui est dès lors extrèmement facilitée. |
| Class | Class.js | Ce fichier contient la classe 'Class' (;-)) qui permet de contenir des objets "taillés" pour le framework Mootools. Ce fichier contient deux méthodes pour les objets basiques Mootools à savoir "extend" et "implement" qui permettent respectivement d'étendre un objet dans un autre et d'implémenter, au moins, une fonction/méthode dans un objet existant. |
| Class | Class.Extras.js | Fichier qui contient deux classes dites 'Extra' pour les modèles objets basiques Mootools. 'Chain' qui est une classe permettant notamment de "chaîner" plusieurs exécutions de méthodes (ndr : utiles pour le déroulement d'effets par exemple), et "Events" qui peut notamment être utilisée de la même façon que dans l'exemple précédent à savoir pour définir une succession d'évènements apparaissant lors d'un effet (ndr : FX, voir plus bas dans le tableau). |
| Native | Array.js | Ce fichier définit la notion de 'Array' soit 'tableau' en français au sein de Mootools Framework. On note par exemple la présence de "foreach" qui permet de boucler en structure objet sur un tableau. On peut aussi noter la présence de "filter" qui permet d'extraire par exemple des valeurs d'un tableau selon un critère numérique de valeur. Les 'Array' peuvent utiliser leur méthode 'copy()' pour se dédoubler au sein d'une nouvelle variable. |
| Native | Function.js | Ce fichier définit les modèles des fonctions/méthodes au sein du framework Mootools. La documentation officielle précise que des méthodes sont inspirées directement de Prototype.js dont la description est faite au sein des pages de Webjax.eu |
| Native | Number.js | Ce fichier définit l'entité "Number" et quelques méthodes dont deux de conversion directe (int et float). |
| Native | String.js | Ce fichier définit l'entité "String" au sein de Mootools. Comporte des méthodes intéressantes dont deux de conversion directe (int et float depuis string), un "trim()", des méthodes de conversion des codes couleurs (appréciable) et diverses autres méthodes. |
| Native | Element.js | Ce fichier définit deux classes principales "Element" et "Elements" et une série de méthodes pour les "Element" récupérés via l'utilisation du '$' par exemple. On trouve des méthodes permettant d'insérer des éléments précédemment et ultérieurement à un, des autres, on peut utiliser via des méthodes claires des fonctionnalités permises par Javascript au prix de quelques lignes supplémentaires. |
| Element | Element.Selector.js | Ce fichier définit deux opérateurs '$E' et '$ES' qui permettent de rechercher et sélectionner rapidement des éléments DOM au sein d'une structure DOM. Des méthodes (4) sont aussi définies afin de permettre d'approfondir la recherche d'éléments DOM au sein d'éléments DOM précisés (ndr : study case : sélection avec '$' d'un élement DOM, utilisation de "getElements()" pour sélectionner, éventuellement avec regexp d'autres éléments DOM). |
| Element | Element.Filter.js | Ce fichier définit des méthodes pour "Element" permettant de placer des filtres sur des collections d'éléments DOM réunis en un sein unique à l'aide de l'opérateur '$$'. |
| Element | Element.Form.js | Fichier qui définit deux méthodes permettant d'influer sur les données présentes au sein de 'form'. 'Element.Form.toQueryString()' permet de synthétiser à la manière de 'Form.serialize()' en Prototype.js, les données d'un formulaire sous une chaîne de caractères intelligible. Il est précisé que cette méthode est automatiquement utilisée dans 'Ajax' (ndr : voir plus bas dans le tableau). |
| Element | Element.Event.js | Fichier qui définit l'entité "Event" au sens de Mootools. On peut notamment noter une gestion optimisée des codes clavier utilisés, l'intégration au sein de l'objet des valeurs globales comme les dernières coordonnées clickées, les données concernant 'wheeling' de la souris etc. Amusant et utile on peut aussi noter la possibilité d'affecter des évènements au clavier. "whatever" ou à la touche du clavier vous pouvez linker des évènements directement via la structure objet. |
| Element | Element.Dimensions | Fichier qui définit des méthodes pour permettre la gestion des notions de dimensionnement liés aux éléments DOM. Le fichier définit aussi des méthodes permettant d'influer sur le "scroll" de la page de navigateur ou le placement précis d'un élément DOM. |
| Window | Window.DomReady | Fichier qui définit la possibilité pour le développeur d'ajouter un évènement 'domready' à l'objet 'window'. Cet évènement est 'fired' lorsque la structure DOM du document a été chargée (ndr : ne tient donc pas compte des images). |
| Window | Window.Size | Fichier qui permet d'implémenter "pour la forme" des valeurs renvoyés par les objets Javascript de base. Les valeurs concernent les dimensions de la page en cours. |
| Remote | XHR.js | Fichier qui définit la base des requêtes XMLHttpRequest asynchrones. Permet de lancer une requête vers un serveur avec éventuellement des précisions au niveau des headers. |
| Remote | Ajax.js | Fichier qui définit l'objet 'Ajax' qui sera utilisé communément par beaucoup de développeurs pour intégrer les nouvelles interfaces web-based. Cet objet 'Ajax' reprend les concepts de celui développé avec ses sous-objets au sein de Prototype.js . A noter quand même qu'il est possible via 'Element' d'effectuer un 'send()' sur un '(X)HTML.form' ce qui a pour effet de poster le formulaire via une requête AJAX. |
| Remote | Assets.js | Fichier qui définit des méthodes permettant de charger/loader dynamiquement au sein d'une structure DOM des fichiers de type images, css ou javascript. Encore une fois, il est clairement possible d'effectuer ces inclusions de façon "manuelle" mais la formalisation "objet" et l'aisance d'accès rendent ces méthodes utiles. |
| Remote | Cookie.js | Fichier qui définit un objet bien utile et bienvenu qui permet de gérer de façon "objet" les cookies Javascript (ndr : donc côté client). Ce fichier permet d'utiliser optimalement (ndr : du point de vue de l'auteur les fonctionnalités basiques de Javascript). La documentation officielle précise que ces méthodes sont dérivées de QuirksMode. |
| Remote | Json.js | Fichier définissant un "outil" permettant de créer à partir de strings formattées JSON des objets ou inversement (ndr : créer des strings à partir des objets). |
| Remote | Json.Remote.js | Fichier qui définit l'objet permettant de réaliser automatiquement un appel XHR qui est voué à lire du code JSON. L'objet est taillé pour pouvoir définir des fonctions/méthodes lors des évènements de retour de l'appel XHR. |
| Effects | Fx.Base.js | Ce fichier définit les informations/paramètres de base ainsi que les méthodes basiques pour gérer les effets graphiques au sein de structures DOM. On retrouve les mêmes concepts que dans Scriptaculous mais le tout est plus aisé à gérer du fait de la structure objet claire et syntéthique. |
| Effects | Fx.CSS.js | Ce fichier ne fait pas l'objet d'une documentation en ligne. Il est précisé que cet objet sert au sein de Fx.Style, Fx.Styles et Fx.Elements. |
| Effects | Fx.Style.js | Ce fichier définit l'objet qui permet réellement de commencer à appliquer des effets en manipulant des attributs CSS. |
| Effects | Fx.Styles.js | Fichier qui définit l'objet permettant d'appliquer des effets sur plusieurs propriétés CSS simultanément. |
| Effects | Fx.Elements.js | Fichier qui définit l'objet qui permet d'effectuer des effets ou une série d'effets sur plusieurs éléments DOM simultanément. Exemple intéressant que celui présenté dans la documentation officielle permettant d'appliquer un effet à tous les liens hypertextes "(X)HTML.a" . |
| Effects | Fx.Scroll.js | Il est important de noter que cet effet nécessite la présence d'une 'doctype' XHTML. Cet objet permet de réaliser des "scrollings" sur des éléments DOM avec "overflow" et y compris l'élément 'window'. |
| Effects | Fx.Slide.js | Fichier qui définit l'objet permettant de réaliser des "sliders". Le contenu "slide" horizontalement ou verticalement. |
| Effects | Fx.Transitions.js | Fichier qui définit les différents effets de type "transition" applicables via Mootools. La liste est différente et peut être plus explicite que celle présente au sein de Scriptaculous dans les objets de même destination. |
| Drag | Drag.Base.js | Fichier qui définit les méthodes basiques pour gérer le concept de "Drag ou Glissement" d'éléments DOM. L'objet permet de définir assez précisement le champ d'actions des actions réalisables. |
| Drag | Drag.Move.js | Fichier qui définit l'objet permettant de réaliser des actions de "drag" plus poussées. Ce fichier permet notammnet le "snapping" et les éléments dits "droppables", c'est à dire des éléments ou l'on "lâche" d'autres éléments via une action de "drag". Il est important de noter que ce type de fonctionnalités nécessite une doctype de type XHTML. Un élément peut être rendu "draggable" via une propriété "Element.makeDraggable". |
| Plugins | Hash.js | Fichier définissant un objet "Hash" permettant de créer des chaînes de type de celles à envoyer au constructeur JSON. |
| Plugins | Hash.Cookie.js | L'objet définit par ce fichier permet de gérer optimalement dans des cookies des objets type JSON dont la création/interprétation semble être faite via "Hash". Ce type de fonctionnalité peut se révéler extrèmement intéressante notamment au sein de sites comme Webjax.eu qui ne nécessite pas d'inscriptions mais tolère la gestion de favoris. |
| Plugins | Color.js | L'objet définit par ce fichier permet de gérer optimalement via un objet complet et dédié les problématiques liés à l'utilisation de différents formats de couleurs. |
| Plugins | Group.js | Fichier qui permet de définir un "groupe" de requêtes XHR/AJAX. La gestion via un groupe, permet de s'assurer par exemple de la fin de chargement de l'ensemble des requêtes XHR/AJAX et non une à une comme il conviendrait de faire par exemple via Prototype.js |
| Plugins | Scroller.js | Cet objet permet de "scroller" un élément DOM, inclusion faite de l'élément 'window', lorsque le curseur de la souris atteint certaines zones définies du dit élément. Il est noté que la méthode 'Scroller.start()' doit être appelée afin de commencer le 'listening'. |
| Plugins | Slider.js | Cet objet nécessite une doctype XHTML pour fonctionner. L'objet permet de créer un "slider" à deux éléments, un "knob" et un "container". |
| Plugins | SmoothScroll.js | Objet qui permet d'indexer toutes les "anchors/ancres" dans une structure DOM et de proposer un effet de scrolling "smooth" pour les atteindre lors de clicks utilisateurs en ce sens. |
| Plugins | Sortables.js | Cet objet définit les fonctionnalités nécessaires pour rendre une liste "sortable" c'est à dire "triable" à la manière de ce qui existe dans Scriptaculous.js . |
| Plugins | Tips.js | Cet objet nécessite une doctype XHTML. L'objet apporte les fonctionnalités nécessaires pour la définition et gestion en terme d'apparition de 'tooltips ou messages d'aides' personnalisés qui tranchent (niarf) avec le format standard de ce type de bulles infos. |
| Plugins | Accordion.js | L'objet nécessite l'utilisation d'une doctype XHTML. L'objet permet de réaliser à partir d'élements DOM des "Accordion" qui sont des éléments d'interface "empilés" avec une occurence au contenu visible, les autres occurences pouvant être chargées via un click sur les titres. Le choix d'une nouvelle occurence provoque la disparition de l'ancienne occurence visible. |
Le tableau ci-avant a donc défini l'ensemble des objets présents au sein du framework Mootools (ndr : au 2007/12/17) dans sa version 1.11.
Nous allons tenter de vous présenter au sein de la liste de pages de la rubrique Webjax.eu consacrée à Mootools des exemples concrets d'utilisation du framework afin de faciliter les intégrations que vous souhaiteriez réaliser.
: 17/12/2007 20:12:03 | 
: 
