Von all den Bibliotheken 'Web 2.0' zur Verfügung, scriptaculous ist sicherlich die schlecht dokumentiert! Auf der offiziellen Website, oft langsam, die Dokumentation ist unvollständig, schlecht gemacht und schwierig zu bedienen. Mit den neuesten Versionen, dann sind einige neue Features fehlen völlig, ebenso wie die neue Core-Effekt Tween (Effect.Tween). Die letztere, ähnlich wie Tween in Flash, können Sie benutzerdefinierte Übergänge zu manipulieren. SYNOPSIS Seine Grundlage ist die folgende:
1 | object , from , to ) ; . Effect Tween (Objekt, von, bis); |
Dieser neue Effekt kann dann eine zwischen (Transition) zwischen zwei Werten, die Eigenschaften oder rufen Sie Methoden eines Objekts (einschließlich Elemente der HTML DOM). Es unterstützt auch Callback-Funktionen, die den Kontext des Objekts, auf dem Sie den Übergang haben werden.
Hier sind einige Beispiele:
. a) Führt eine Eigenschaft Tween mp Objekt mo .
1 2 3 | { mp : 0 } var m = mp {: 0} / / ( mo , 30 , 80 , 'mp' ) ; . neuen Effect Tween (m, 30, 80, 'mp'); |
b) Führen Sie eine Tween auf der 'foo' DOM HTML
1 | 'foo' ', 0, 100, ' innerHTML '); EffectTween neue ('foo' ', 0, 100,' innerHTML '); |
c) Stellen Sie die Parameter von der Norm scriptaculous unterstützt:
1 | ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; . neuen Effect Tween ('foo', 10, 100, {duration: 10}, 'innerHTML'); |
d) von Callback-Funktionen verwenden:
1 2 3 4 | ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { . neuen Effect Tween ('foo', 10, 100, {duration: 10,0}, function (p) { = 'Countdown: ' + p . diese innerHTML = 'Countdown:' + p } ); |
e) Art des Übergangs:
1 | ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; . neuen Effect Tween ('foo', 10, 100, {duration: 10, transition: Effect Transitions sinusförmige..}, 'innerHTML'); |
f) Einstellen der Standard-Veranstaltungen:
1 | ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; neue Effect Tween ('foo', 10, 100, {duration:. 2, afterFinish: function () {alert ("Game Over ");}}, Funktion (p) {this innerHTML = 'Countdown:". + p }); |
So testen Sie diese Beispiele können Sie die folgende vollständige 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"> < Kopf > "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); / / Funktion main () { Effect.Tween neue ('foo', 10, 100, {duration: 2, afterFinish: function () {alert ("Game Over ");}}, Funktion (p) = {this.innerHTML" Countdown: '+ p }); } </ script > </ Kopf > < Körper > "foo" >< / div > < div id = "foo"> </ div > </ Körper > </ html > |
Es gibt keine Kommentare für diesen Beitrag
Hinterlasse einen Kommentar