skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

lundi 29 décembre 2008

Introduction aux effets script.aculo.us

Publié par Infinite Loop, à 20 h 02 0 commentaire

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

0 réponse à "Introduction aux effets script.aculo.us"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ▼  2008 (84)
      • ▼  décembre 2008 (34)
        • Modifier les favicons des favoris de Firefox
        • Créer un favicon
        • Introduction aux effets script.aculo.us
        • Citation no. 10 sur le génie
        • Think Geek
        • Google ça pour moi
        • Menu de Noël
        • Déboguer avec Firebug
        • Une alternative à RealPlayer
        • Lorem Ipsum
        • Citation no. 9 sur la compétence
        • Fonction generate_series() de PostgreSQL
        • Astérix et Astérisque
        • Fraude PayPal
        • Modifier un site web configuré pour Contribute
        • Requête SQL pour obtenir un enregistrement au hasard
        • Outils de traduction en ligne
        • Librairie d'icônes PNG gratuite
        • Party de Noël
        • Citation no. 8 sur l'incompétence
        • Faire flotter un élément HTML par dessus un Flash
        • Les origines de Flash
        • Initialisation des événements avec prototype.js
        • Configurer son routeur sans fil pour travailler à ...
        • Débogage PHP avec var_dump et print_r
        • Livre PHP à 700$ sur eBay
        • Effectuer un md5sum
        • Citation no. 7 sur le cerveau
        • Compressions budgétaires = Logiciel libre ?
        • Mise à jour du firmware de mon iPod touch
        • Installer Wikipedia sur son iPod / iPhone
        • Se connecter par SSH à un iPod touch
        • Founders at Work
        • Doit-on fermer les balises PHP ?
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft