Développement »Javascript» Internet

Scriptaculous Effect.Tween: comment ça marche

Jeudi, Mars 20, 2008

De toutes les bibliothèques "web 2.0" disponible, scriptaculous est certainement le plus mal documenté! Sur le site officiel, souvent lente, la documentation est incomplète, mal formulées et difficiles à utiliser. Avec les dernières versions, puis, quelques nouvelles fonctionnalités sont totalement absents, tout comme le nouveau Core effet Tween (Effect.Tween). Celui-ci, semblable à la Tween en Flash, vous permet de manipuler des transitions. SYNOPSIS sa base est le suivant:

PLAIN TEXT
JavaScript:
  1. object , from , to ) ; Effet. Tween (object, from, to);

Ce nouvel effet peut donc exécuter une interpolation (transition) entre deux valeurs, propriétés des méthodes d'appel ou d'un ensemble d'un objet (y compris les éléments du DOM HTML). Il supporte également les fonctions de rappel qui auront le contexte de l'objet sur lequel vous exécutez la transition.

Voyons quelques exemples:

a) Effectue une propriété mp Tween objet mo

PLAIN TEXT
JavaScript:
  1. { mp : 0 } var = Mo (MP: 0)
  2. / /
  3. ( mo , 30 , 80 , 'mp' ) ; Nouvel effet. Tween (MO, 30, 80, 'mp');

b) Procéder à une interpolation de l'élément sur foo 'DOM HTML

PLAIN TEXT
HTML:
  1. "foo" >< / div> <div id = "foo"> </ div>

PLAIN TEXT
JavaScript:
  1. 'foo' ', 0, 100, ' innerHTML '); EffectTween nouvelles ( 'foo', 0, 100, 'innerHTML');

c) Définissez les paramètres standard pris en charge par scriptaculous:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; Nouvel effet. Tween ( 'foo', 10, 100, (durée: 10), 'innerHTML');

d) Utilisation de fonctions de rappel:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { Nouvel effet. Tween ( 'foo', 10, 100, (durée: 10,0), fonction (p) (
  2. = 'Countdown: ' + p cela. innerHTML = 'Compte à rebours:' + p
  3. )
  4. )

e) type de transition:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; Nouvel effet. Tween ( 'foo', 10, 100, (durée: 10, transition: Effect. Transitions. Sinoidal), 'innerHTML');

f) La norme des événements:

PLAIN TEXT
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; Nouvel effet. Tween ( 'foo', 10, 100, (durée: 2, AfterFinish: function () (alert ( "Game Over ");)), fonction (p) (this. innerHTML = 'Compte à rebours:' + p ));

Pour tester ces exemples, vous pouvez utiliser le code complet suivant:

PLAIN TEXT
HTML:
  1. DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. > <html "http://www.w3.org/1999/xhtml" xmlns =>
  4. "Content-Type" content = "text/html; charset=utf-8" / > http-equiv <meta = "Content-Type" content = "text/html; charset=utf-8" />
  5. <title> Untitled Document </ title>
  6. "text/javascript" src = "js/prototype.js" >< / script> <script "text/javascript" type = src = "js/prototype.js"> </ script>
  7. "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script> <script "text/javascript" type = src = "js/scriptaculous.js?load=effects"> </ script>
  8. "text/javascript" > <script type = "text/javascript">
  9. / /
  10. Event.observe (window, 'load', main);
  11. / /
  12. la fonction main () (
  13. Nouveau Effect.Tween ( 'foo', 10, 100, (durée: 2, AfterFinish: function () (alert ( "Game Over ");)), fonction (p) = (this.innerHTML« Compte à rebours: '+ p ));
  14. )
  19. "foo" >< / div> <div id = "foo"> </ div>

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...

Tags:

Il n'ya pas de commentaires pour cet article

Laissez un commentaire

TAG PERMISSIONS XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL