Parmi toutes les bibliothèques «Web 2.0» disponibles, scriptaculous est certainement le plus mal documenté! Sur le site officiel, souvent lente, la documentation est incomplète, mal fait et difficiles à utiliser. Avec les dernières versions, puis, quelques nouvelles fonctionnalités sont totalement absents, tout comme le nouvel effet de base de Tween (Effect.Tween). Ce dernier, à l'instar de Tween dans Flash, vous permet de manipuler des transitions personnalisées. SYNOPSIS Sa base est la suivante:
1 | object , from , to ) ; . Effet Tween (objet, à partir de, pour); |
Ce nouvel effet peut alors effectuer une interpolation (de transition) entre deux valeurs, définir des propriétés ou appeler les méthodes d'un objet (y compris les éléments du DOM HTML). Il supporte également les fonctions de rappel qui aura le contexte de l'objet sur lequel vous exécutez la transition.
Voici quelques exemples:
. a) Effectue une propriété Tween mp objet mo .
1 2 3 | { mp : 0 } var m = mp {: 0} / / ( mo , 30 , 80 , 'mp' ) ; . Effet new Tween (m, 30, 80, «MP»); |
b) Effectuer un Tween sur le 'foo' DOM HTML
1 | 'foo' ', 0, 100, ' innerHTML '); EffectTween nouvelle ('foo', 0, 100, 'innerHTML'); |
c) Définir les paramètres pris en charge par l'scriptaculous standard:
1 | ( 'foo' , 10 , 100 , { duration : 10 } , 'innerHTML' ) ; . nouvelles effet tween ('foo', 10, 100, {durée: 10}, 'innerHTML'); |
d) Utilisation des fonctions callback:
1 2 3 4 | ( 'foo' , 10 , 100 , { duration : 10.0 } , function ( p ) { . nouvelles effet tween ('foo', 10, 100, {durée: 10,0}, function (p) { = 'Countdown: ' + p . présent innerHTML = 'Compte à rebours: "+ p } ); |
e) Type de transition:
1 | ( 'foo' , 10 , 100 , { duration : 10 , transition : Effect. Transitions . sinoidal } , 'innerHTML' ) ; . nouvelles effet tween ('foo', 10, 100, {durée: 10, la transition: Effet Transitions sinoidal..}, 'innerHTML'); |
f) Réglage de l'événement standard:
1 | ( 'foo' , 10 , 100 , { duration : 2 , afterFinish : function ( ) { alert ( "Game Over" ) ; } } , function ( p ) { this . innerHTML = 'Countdown: ' + p } ) ; Effet new Tween ('foo', 10, 100, {Durée: 2., afterFinish: function () {alert ("Game Over fonction ");}}, (p) {this innerHTML = 'Compte à rebours:«. + p }); |
Pour tester ces exemples, vous pouvez utiliser le code complet suivant:
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"> < tête > "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 de type = "text / javascript" src = "js / prototype.js"> </ scripts > "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script > < script de type = "text / javascript" src = "js / scriptaculous.js? = charge des effets"> </ scripts > "text/javascript" > < script de type = "text / javascript"> / / Event.observe (fenêtre, «charge», principale); / / la fonction main () { Effect.Tween nouvelle ('foo', 10, 100, {durée: 2, afterFinish: function () {alert ("Game Over fonction ");}}, (p) = {« Compte à rebours: «this.innerHTML + p }); } </ scripts > </ tête > < corps > "foo" >< / div > < div id = "toto"> </ div > </ corps > </ html > |
Il n'y a aucun commentaire pour cet article
Laisser un commentaire