Scriptaculous et Prototype est un assemblage de deux librairies AJAX,
qui vous permet d’effectuer des effets relativement spectaculaires,
avec peu de code.
Vous pouvez télécharger Scriptaculous (Prototype est inclus avec Scriptaculous) sur la page en cliquant sur l’image plus haut.
Pour commencer, vous devez insérer les lignes suivantes entre
<head> et </head>
<script src="javascripts/prototype.js" type="text/javascript"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"></scrip>
Vous devez changer le répertoire pour celui que vous utilisez.
Vous pouvez alors créer des effets dans votre page.
Ex:
<button onclick=”new Effect.toggle(’box’,’Appear’);”>Cliquez ici</button>
<img src=”monimage.png” id=”box”>
Cette exemple fera disparaitre et apparaitre l’image.
On pourrait aussi mettre style=”display:none;” à l’image,
elle serait invisible au départ et apparaitrait au clique du bouton.
Vous pouvez aussi appliquer cette technique sur une balise <div> ex: <div id=”box”> </div>
Tout ce qui est entre les deux tags aura le même effet que sur l’image.
Ils existe plusieurs autres façons d’utiliser cette librairie.
Voici la page de démo du site de scriptaculous:
http://scriptaculous.le-developpeur-web.com/scriptaculous.demo.php
Sur cette page vous allez voir plusieurs exemples utilisant des fonctions.
Les fonctions doivent être placées entre le <head> et le </head>
et doivent être appellées de la même façon que plus haut.
Ex:
<button onclick=”mafonction();”>Cliquez ici</button>
<img src=”monimage.png” id=”box”>
La différence est l’effet qui est programmé dans la fonction.
Loading ...
