JavaScript: script.aculo.us, effetti principali

Gli effetti Effect.Morph, Effect.Move, Effect.Opacity, Effect.Parallel, Effect.Scale e Effect.Highlight costituiscono il cuore della libreria aculous, per il modulo effects.js. Di seguito propongo la sintassi prevista da ciascuno degli effetti indicati.

Effect.Morph

Questo effetto permette di modificare le proprietà CSS di un elemento, generando quindi una transizione che porta l'elemento dallo stato iniziale (con precise proprietà CSS) a quello finale (con nuove proprietà CSS). La funzione può essere invocata seguendo la tipica sintassi di Prototype:

$('id_elemento').morph('background: white; color: gray');

oppure con:

new Effect.Morph('id_elemento',{style});

dove style è la stringa con le nuove proprietà CSS. Qui trovate un esempio. L'effetto funziona a patto di non avere le proprietà di stile in un foglio esterno!

Effect.Move

Questo effetto muove un elemento spostandone le coordinate dell'angolo superiore sinistro. Le coordinate possono essere assolute (mode: 'absolute') oppure relative (mode: 'relative') all'oggetto contenitore. La sintassi della funzione prevede come parametri le coordinate verso cui muovere l'elemento e l'opzione che specifica come esse vanno interpretate. L'opzione relative è usata di default.

new Effect.Move('warning',{x: 100, y:0, mode:'relative'})

Qui trovate un esempio.

Effect.Opacity

Questo effetto modifica la trasparenza dell'elemento (va indicato l'id dell'elemento alla funzione, come primo parametro). La proprietà viene specificata attraverso un parametro variabile nell'intervallo [0.0;1.0]. Il valore iniziale da applicare all'elemento è specificato con l'opzione from. Il valore finale, invece, con l'opzione to. L'effetto realizza, dunque, la transizione della proprietà di trasparenza dal valore from al valore to. Con l'opzione duration può essere specificata, eventualmente, la durata (in secondi) dell'effetto:

new Effect.Opacity('warning',{duration: 1, from:1.0, to: 0.5})

Qui trovate un esempio.

Effect.Scale

Questo effetto modifica le proprietà width ed height dell'elemento. Il primo parametro della funzione è come sempre l'id dell'elemento, il secondo parametro corrisponde al valore percentuale da usare come incremento per le proprietà dette all'inizio. La funzione accetta altre opzioni, fornite alla stessa attraverso un unica stringa: scaleX indica (con true, valore di default) che l'effetto va applicato alla proprietà width; scaleY indica (con true, valore di default) che l'effetto va applicato alla proprietà height; scaleContent è il valore usato di default (quindi true) dalla funzione per applicare il valore percentuale (il secondo parametro della funzione) a entrambe le proprietà; scaleFromCenter, se abilitato con true, dice di ingrandire l'elemento mantenendone la posizione nel documento; scaleMode permette di specificare con le stringhe originalHeight e originalWidth i nuovi valori dell'elemento.

new Effect.Scale('warning',150,{scaleY: false})

Qui trovate un esempio.

Effect.Highlight

Questo effetto applica un colore di background all'elemento effettuando la transizione da un valore iniziale (opzione startcolor) a un valore finale (opzione endcolor). Con l'opzione duration, come già visto per altri effetti, può essere specificata la durata in secondi dell'effetto. L'opzione restorecolor imposta un nuovo colore all'elemento, dopo la transizione dell'effetto. Il colore da assegnare all'elemento dopo la transizione viene solitamente cercato dalla funzione nell'omonima proprietà dell'elemento contenitore. Tale ricerca va a buon fine solo se il colore è stato descritto attraverso una terna di valori rgb!

new Effect.Highlight('warning',{startcolor:'#64c6eb', endcolor:'#ddffee', duration:0.3})

Qui trovate un esempio.

Effect.Parallel

Questa funzione permette di applicare più effetti in contemporanea, anche a più elementi! Il primo argomento della funzione è infatti un array di effetti, come quelli visti finora. Gli effetti vanno elencati nell'array e separati fra di loro con un virgola:

new Effect.Parallel( [ new Effect.Move('warning',{x: 200, y:0, mode: 'relative'}), new Effect.Opacity('warning',{duration: 1.0, from:1.0, to: 0.5}) ] )

Qui trovate un esempio.