Da 'Web 2.0' todas as bibliotecas disponíveis, scriptaculous é certamente o mais mal documentado! No site oficial, muitas vezes lento, a documentação está incompleta, mal feita e difícil de usar. Com os últimos lançamentos, então, algumas novas funcionalidades estão completamente ausentes, assim como o novo núcleo efeito Tween (Effect.Tween). O último, à semelhança do Tween em Flash, permite que você manipule transições personalizadas. SINOPSE A sua base é o seguinte:
1 | object , from , to ) ; . Efeito Tween (objeto, de, para); |
Este novo efeito pode então executar uma interpolação (transição) entre dois valores, definir propriedades ou chamar métodos de um objeto (incluindo elementos do DOM HTML). Ele também suporta funções de callback que terá o contexto do objeto em que você executa a transição.
Aqui estão alguns exemplos:
. a) Executa uma propriedade Tween mp objeto mo .
1 2 3 | { mp : 0 } var m = mp {: 0} / / ( mo , 30 , 80 , 'mp' ) ; . Efeito nova Tween (m, 30, 80, 'mp'); |
b) Realizar uma Tween na 'foo' DOM HTML
1 | 'foo' ', 0, 100, ' innerHTML '); EffectTween novo ('foo', 0, 100, 'innerHTML'); |
c) Definir os parâmetros suportados pelo scriptaculous padrão:
1 | ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; . nova Efeito Tween ('foo', 10, 100, {duration: 10}, 'innerHTML'); |
d) O uso de funções de callback:
1 2 3 4 | ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { . nova Efeito Tween ('foo', 10, 100, {duration: 10,0}, function (p) { = 'Countdown: ' + p . esse innerHTML = 'Countdown:' + p } ); |
e) Tipo de transição:
1 | ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; . nova Efeito Tween ('foo', 10, 100, {duration: 10, de transição: Efeito Transitions sinoidal..}, 'innerHTML'); |
f) Definir os eventos padrão:
1 | ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; Efeito novo Tween ('foo', 10, 100, {duration:. 2, afterFinish: function () {alert ("Game Over função ");}}, (p) {this innerHTML = 'Countdown:'. + p }); |
Para testar esses exemplos que você pode usar o código completo a seguir:
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"> < cabeça > "Content-Type" content = "text/html; charset=utf-8" / > < meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" /> title > < title > Untitled Document </ title > "text/javascript" src = "js/prototype.js" >< / script > < roteiro type = "text / javascript" src = "js / prototype.js"> </ roteiro > "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script > < roteiro type = "text / javascript" src = "load js / scriptaculous.js? = effects"> </ roteiro > "text/javascript" > < roteiro type = "text / javascript"> / / Event.observe (window, 'load', principal); / / função main () { Effect.Tween novo ('foo', 10, 100, {duração: 2, afterFinish: function () {alert ("Game Over função ");}}, (p) = {'Countdown:' this.innerHTML + p }); } </ roteiro > </ cabeça > < corpo > "foo" >< / div > < div id = "foo"> </ div > </ corpo > </ html > |
Não há comentários para este post
Deixe um comentário