Desarrollo »Javascript» Internet

Scriptaculous Effect.Tween: ¿Cómo funciona?

Jueves, 20 de marzo 2008

De todas las bibliotecas "Web 2.0", disponible, scriptaculous es ciertamente el más mal documentada! En el sitio web oficial, a menudo lenta, la documentación es incompleta, mal hecha y difícil de usar. Con las últimas versiones, a continuación, algunas nuevas características están totalmente ausentes, así como el nuevo efecto primordial Tween (Effect.Tween). Este último, similar a la interpolación en Flash, te permite manipular las transiciones. SINOPSIS su base es la siguiente:

Texto sin formato
JavaScript:
  1. object , from , to ) ; Efecto. Tween (objeto, de, a);

Este nuevo efecto por lo tanto se puede ejecutar una interpolación (de transición) entre dos valores, los métodos de llamada o establecer las propiedades de un objeto (incluidos los elementos del DOM HTML). También es compatible con las funciones de devolución de llamada que tenga el contexto del objeto sobre el que se ejecute la transición.

Veamos algunos ejemplos:

a) Realiza una propiedad mp Tween objeto mo

Texto sin formato
JavaScript:
  1. { mp : 0 } mo var = (MP: 0)
  2. / /
  3. ( mo , 30 , 80 , 'mp' ) ; Nuevo efecto. Tween (MO, 30, 80, 'mp');

b) Realizar una interpolación en el elemento foo ',' DOM HTML

Texto sin formato
HTML:
  1. "foo" >< / div> <div id = "foo"> </ div>

Texto sin formato
JavaScript:
  1. 'foo' ', 0, 100, ' innerHTML '); EffectTween nuevos ( 'foo', ', 0, 100,' innerHTML ');

c) Establecer los parámetros estándar con el apoyo de scriptaculous:

Texto sin formato
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; Nuevo efecto. Tween ( 'foo', 10, 100, (duración: 10), 'innerHTML');

d) Uso de funciones de llamada:

Texto sin formato
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { Nuevo efecto. Tween ( 'foo', 10, 100, (duración: 10,0), función (p) (
  2. = 'Countdown: ' + p esto. innerHTML = 'Cuenta atrás:' + p
  3. )
  4. )

e) el tipo de transición:

Texto sin formato
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; Nuevo efecto. Tween ( 'foo', 10, 100, (duración: 10, de transición: Efecto. Transitions. Sinoidal), 'innerHTML');

f) El nivel de los eventos:

Texto sin formato
JavaScript:
  1. ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; Nuevo efecto. Tween ( 'foo', 10, 100, (duración: 2, afterFinish: function () (alert ( "Game Over ");)), función (p) (this. innerHTML = 'Cuenta atrás:' + p ));

Para probar estos ejemplos se puede utilizar el código completo siguiente:

Texto sin formato
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" > Tipo de <script = "text/javascript">
  9. / /
  10. Event.observe (window, 'load', principal);
  11. / /
  12. función principal () (
  13. Effect.Tween nuevos ( 'foo', 10, 100, (duración: 2, afterFinish: function () (alert ( "Game Over ");)), función (p) = (this.innerHTML 'Cuenta atrás:' + p ));
  14. )
  19. "foo" >< / div> <div id = "foo"> </ div>

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

Etiquetas:

No hay ningún comentario para este post

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <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