Of all the libraries 'Web 2.0' available, scriptaculous is certainly the most poorly documented! On the official website, often slow, the documentation is incomplete, poorly made and difficult to use. With the latest releases, then, some new features are completely missing, just as the new core effect Tween (Effect.Tween). The latter, similarly to Tween in Flash, allows you to manipulate custom transitions. SYNOPSIS Its basis is the following:
1 | object , from , to ) ; Effect. Tween (object, from, to); |
This new effect can then perform a tween (transition) between two values, set properties or call methods of an object (including elements of the HTML DOM). It also supports callback functions that will have the context of the object on which you run the transition.
Here are some examples:
. a) Performs a property Tween mp object mo .
1 2 3 | { mp : 0 } var m = mp {: 0} / / ( mo , 30 , 80 , 'mp' ) ; new Effect. Tween (m, 30, 80, 'mp'); |
b) Perform a Tween on the 'foo' DOM HTML
1 | 'foo' ', 0, 100, ' innerHTML '); EffectTween new ('foo' ', 0, 100,' innerHTML '); |
c) Set the parameters supported by the standard scriptaculous:
1 | ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; new Effect. Tween ('foo', 10, 100, {duration: 10}, 'innerHTML'); |
d) Use of callback functions:
1 2 3 4 | ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { new Effect. Tween ('foo', 10, 100, {duration: 10.0}, function (p) { = 'Countdown: ' + p this. innerHTML = 'Countdown:' + p } ); |
e) Type of transition:
1 | ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; new Effect. Tween ('foo', 10, 100, {duration: 10, transition: Effect. Transitions. sinoidal}, 'innerHTML'); |
f) Setting the standard events:
1 | ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; new Effect. Tween ('foo', 10, 100, {duration: 2, afterFinish: function () {alert ("Game Over");}}, function (p) {this. innerHTML = 'Countdown:' + p }); |
To test these examples you can use the following complete code:
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"> < head > "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 > < script type = "text / javascript" src = "js / prototype.js"> </ script > "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script > < script type = "text / javascript" src = "js / scriptaculous.js? load = effects"> </ script > "text/javascript" > < script type = "text / javascript"> / / Event.observe (window, 'load', main); / / function main () { Effect.Tween new ('foo', 10, 100, {duration: 2, afterFinish: function () {alert ("Game Over");}}, function (p) = {this.innerHTML 'Countdown:' + p }); } </ script > </ head > < body > "foo" >< / div > < div id = "foo"> </ div > </ body > </ html > |
There are no comments for this post
Leave a comment