Scriptaculous è una libreria per lo sviluppo di interfacce grafiche accattivanti in ambiente web. Basata sul rodato framework Prototype e scritta utilizzando JavaScript al 100%, Scriptaculous merita un occhio di riguardo da parte di tutti gli sviluppatori web.
Sul numero 113 di ioProgrammo (Aprile 2007) scrissi un articolo su Prototype, un fantastico framework che ha come scopo facilitare lo sviluppo di applicazioni web dinamiche basate su JavaScript. Conclusi l’articolo accennando ad una straordinaria UI library (libreria grafica), ossia Scriptaculous. Per “colpa” delle dimensioni e potenzialità di tale libreria, in quella occasione fornì solo un assaggio di ciò che è possibile fare con Scriptaculous. Visto il sempre maggiore consenso che questa UI library sta riscuotendo ioProgrammo ha deciso di dedicarle una serie di articoli in cui cercheremo di analizzarla abbastanza dettagliatamente.
Prima di iniziare a vedere un po’ di codice, però, voglio fare un’ulteriore precisazione: conoscere Prototype è utile, ma non indispensabile per lavorare con Scriptaculous. Questo articolo, quindi, può essere letto da chiunque ha una discreta conoscenza di JavaScript.
Puoi leggere il resto dell’articolo Web 2.0 con effetti “Scriptacolari” su: ioProgrammo N. 124 – Marzo 2008 – Edizioni Master
Errata Corrige
Ho notato che, a causa di un errore di editing della redazione, le opzioni delle tabelle pubblicate su ioProgrammo sono tutte in upper case. Ovviamente, visto che JavaScript è un linguaggio case-sensitive, utilizzando quelle opzioni tutte in lettere maiuscole il codice non funzionerà. Riporto qui, quindi, le tabelle pubblicate su ioProgrammo con il case corretto.
Tabella 1: Tipi di effetti base
| Nome Effetto | Descrizione |
|---|---|
| Highlight | Evidenzia l’elemento tramite un “flash”. Generalmente usato per attirare l’attenzione dell’utente. |
| Opacity | Aggiusta l’opacità dell’elemento facendola passare da completamente visibile ad opaca o viceversa. |
| MoveBy | Modifica la posizione dell’elemento. |
| Scale | Cambia la dimensione dell’elemento. |
| Parallel | Non è un vero e proprio effetto, piuttosto consente di eseguire più effetti in parallelo. Lo vedremo in un paragrafo dedicato. |
Tabella 2: Tipi di effetti combinati
| Nome Effetto | Descrizione |
|---|---|
| Appear | Mostra un elemento facendolo passare dallo stato nascosto a visibile, modificando la sua opacità gradualmente. |
| Fade | Nasconde un elemento facendo passare la sua opacità da visibile (1.0) ad invisibile (0.0) in modo graduale. |
| BlindUp | Nasconde l’elemento “raccogliendolo” dal fondo fino alla cima, un po’ come quando si alza una saracinesca. |
| BlindDown | Mostra l’elemento espandendolo dalla cima al fondo, un po’ come quando si abbassa una saracinesca. |
| SlideUp | Simile a BlindUp |
| SlideDown | Simile a BlindDown |
| Grow | Mostra l’elemento target modificando la sua dimensione da 0 alla grandezza naturale. |
| Shrink | Nasconde l’elemento modificando la sua dimensione fino a farla arrivare a 0. |
| DropOut | Nasconde l’elemento facendolo “cadere” in fondo alla pagina e, durante il tragitto, ne modifica la sua opacità fino a farlo sparire. |
| Fold | Nasconde l’elemento riducendone la dimensione dalla cima al fondo e poi da destra a sinistra fino a farlo sparire. |
| Puff | Nasconde l’elemento aumentandone la dimensione e modificando contemporaneamente la sua opacità fino a 0. |
| Squish | Nasconde l’elemento riducendone la dimensione dall’angolo inferiore destro a quello superiore sinistro. |
| SwitchOff | Nasconde un elemento con un effetto simile allo spegnimento di una televisione. |
| Pulsate | Generalmente usato per attirare l’attenzione dell’utente. Fa “pulsare” l’elemento. |
| Shake | “Scuote” l’elemento target. Generalmente usato per attirare l’attenzione dell’utente. |
Tabella 3: Opzioni comuni a tutti gli effetti
| Opzione | Descrizione |
|---|---|
| duration | Specifica la durata dell’effetto in secondi. Di default è 1 secondo. |
| from | E’ un float che indica il punto di partenza di un effetto. Di default è 0.0 ed il suo significato varia a seconda dell’effetto. Il valore deve essere compreso tra 0.0 e 1.0. |
| to | E’ un float che indica il punto di arrivo di un effetto. Di default è 1.0 ed il suo significato varia a seconda dell’effetto. Il valore deve essere compreso tra 0.0 e 1.0. |
| fps | Sta per frames per second e specifica il numero di frame per secondo. |
| transition | Attraverso transition è possibile specificare una funzione di callback che definisce la transizione dell’effetto. Vi sono alcune transizioni built-in che vedremo. Di default si ha una transizione uniforme. |
| sync | Un boolean che indica se sincronizzare o meno un effetto quando applicato in parallelo ad altri. |
| queue | Usata per impostare il tipo di coda. La vedremo in un paragrafo a parte quando parleremo di effetti in serie e parallelo. |
Tabella 4: Proprietà dell’oggetto passato alle funzioni di callback
| Opzione | Descrizione |
|---|---|
| currentFrame | Un numero indicante il frame corrente. |
| startOn | Il timestamp (in millisecondi) rappresentante l’inizio dell’effetto. |
| finishOn | Il timestamp (in millisecondi) indicante la fine dell’effetto. |
| element | L’elemento a cui è stato applicato l’effetto. |
| Options | Le opzioni che sono state passate all’effetto. |
