De todas las bibliotecas de la web 2.0 'disponible, scriptaculous es sin duda el más pobremente documentada! En la página web oficial, suele ser lento, la documentación es incompleta, mal hecho y difícil de usar. Con las últimas versiones, a continuación, algunas de las características nuevas están completamente ausentes, así como el nuevo núcleo de efecto Tween (Effect.Tween). Este último, en una manera similar a la de Tween de Flash, le permite manipular las transiciones personalizadas. Su base SINOPSIS es el siguiente:
1 | object , from , to ) ; . Efecto de interpolación (objeto, desde, hacia); |
Este nuevo efecto puede entonces realizar una interpolación (de transición) entre dos valores, establecer propiedades o llamar a métodos de un objeto (incluidos los elementos de la DOM de HTML). También es compatible con funciones de llamada que tiene el contexto del objeto en el que se ejecute la transición.
He aquí algunos ejemplos:
. a) Realiza una propiedad de interpolación mp objeto de mo .
1 2 3 | { mp : 0 } var m = {pf: 0} / / ( mo , 30 , 80 , 'mp' ) ; . nuevo efecto Tween (mes, 30, 80, 'mp'); |
b) Realizar una interpolación en el 'foo' DOM HTML
1 | 'foo' ', 0, 100, ' innerHTML '); EffectTween nueva ("foo" ", 0, 100, 'innerHTML'); |
c) Establecer los parámetros que admite la norma scriptaculous:
1 | ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; Efecto nueva Tween ('foo', 10, 100, {duration: 10}, "innerHTML").; |
d) Uso de funciones de llamada:
1 2 3 4 | ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { . nuevo efecto de interpolación ('foo', 10, 100, {duration: 10,0}, function (p) { = 'Countdown: ' + p . este innerHTML = 'Cuenta atrás: "+ p } ); |
e) Tipo de operación:
1 | ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; . nuevo efecto de interpolación ('foo', 10, 100, {duration: 10, la transición: Efecto de las transiciones. senoidal.}, 'innerHTML'); |
f) Determinación de los eventos estándar:
1 | ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; Efecto nueva Tween ('foo', 10, 100, {Duración: 2, afterFinish: function () {alert ("Game Over");}}., la función (p) {esta innerHTML = 'Cuenta atrás: "+ p. }); |
Para probar estos ejemplos se puede utilizar el código completo siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > < html xmlns = "http://www.w3.org/1999/xhtml"> < cabeza > "Content-Type" content = "text/html; charset=utf-8" / > < meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" /> title > < título > Untitled Document </ titulo > "text/javascript" src = "js/prototype.js" >< / script > < script de type = "text / javascript" src = "js / prototype.js"> </ script de > "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script > < script de type = "text / javascript" src = "js / scriptaculous.js? = carga de los efectos"> </ script de > "text/javascript" > < script de type = "text / javascript"> / / Event.observe (ventana, 'load', principal); / / la función main () { Effect.Tween nueva ('foo', 10, 100, {Duración: 2, afterFinish: function () {alert ("Game Over");}}, function (p) = {'Cuenta atrás: "this.innerHTML + p }); } </ script de > </ cabeza > < cuerpo > "foo" >< / div > < div id = "foo"> </ div > </ cuerpo > </ html > |
No hay comentarios para esta entrada
Deja un comentario