Introduction aux effets script.aculo.us

script.aculo.us est une librairie JavaScript d'effets visuels qui repose sur la base de prototype, un peu comme si elle agissait comme une extension du framework. Il faut donc inclure les deux librairies pour pouvoir commencer à créer des effets. En téléchargeant le fichier zip contenant scriptaculous, une version de prototype est incluse dans le répertoire /lib/ mais comme j'utilise généralement prototype dans la plupart de mes projets, j'ai tendance à utiliser une version indépendante plutôt que la version fournie dans le fichier compressé.

Lors de l'inclusion des librairies, il faudra tenir compte que scriptaculous est dépendant de prototype, donc celui-ci devra apparaître en premier pour que scriptaculous puisse être reconnu correctement. Si les scripts sont inversés ou si la version de prototype est trop vieille, un message d'erreur indiquera "uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.6.0".

<script type="text/javascript" src="/js/prototype/1.6.0.3/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="/js/scriptaculous/1.8.2/src/scriptaculous.js"></script>

À partir de ce moment, on peut créer des effets. Contrairement à la documentation de scriptaculous qui utilise les attributs d'événements (onclick="fonction"), je préfère extraire le code JS des balises HTML pour initialiser les événements en utilisant prototype (les deux méthodes fonctionnent bien, c'est une préférence au niveau de la structure).

Pour introduire les effets, je commencerai simplement avec l'affichage et le masquage d'un élément. Si on se rappele bien, l'objet Element de prototype.js offre deux méthodes pour y arriver : show() et hide(). Cependant, l'utilisation de ces méthodes n'offre que deux états à l'objet (affiché ou pas) et on note qu'il n'y a aucune transition dans le changement d'état. C'est ici que scriptaculous vient ajouter un peu d'effets pour rendre le visuel plus intéressant :

1. Toggle
Inverse automatiquement l'état de la fenêtre en utilisant l'effet "Appear", "Slide" ou "Blind".

Event.observe('btnToogle', 'click', function() {
Effect.toggle('box1', 'Slide');
} );

2. Appear
Permet de faire apparaître ou disparaitre un élément en faisant varier l'opacité.

Event.observe('btnShow', 'click', function() {
$('box1').appear({ from: 0, to: 1 });
} );

Event.observe('btnHide', 'click', function() {
$('box1').appear({ from: 1, to: 0 }); }
);

3. Slide
Permet de faire apparaître ou disparaitre un élément horizontalement comme un store de fenêtre (imaginez que le contenu de l'élément s'enroule dans le store).

Event.observe('btnSlideUp', 'click', function() {
Effect.SlideUp('box1');
} );

Event.observe('btnSlideDown', 'click', function() {
Effect.SlideDown('box1');
} );

4. Blind
Semblable à l'effet "Slide" sauf que le contenu ne se déplace pas, c'est le conteneur qui semble se déplacer.

Event.observe('btnBlindUp', 'click', function() {
Effect.BlindUp('box1');
} );

Event.observe('btnBlindDown', 'click', function() {
Effect.BlindDown('box1');
} );

5. switchOff
Permet de faire disparaitre un élément un peu comme lorsqu'on éteint un poste de téléviseur.

Event.observe('btnSwitchOff', 'click', function() {
$('box1').switchOff();
} );

Ce n'est qu'un bref aperçu de que ce scriptaculous propose. On peut paramétrer les effets pour contrôler le jeu de transition, combiner des effets ensemble et modifier dynamiquement les propriétés CSS d'un élément.

Sinon, un autre volet de scriptaculous que j'introduirai prochainement est le "drag and drop" qui permet de faire des fenêtres flottantes, déplacer les éléments sur une page, etc (un peu comme Facebook ou Blogspot font pour configurer la mise en page). Maintenant, amusez-vous à explorer les possibilités!

Tags: JavaScript