Script.aculo.us
Script.aculo.us è una libreria che permette di creare effetti grafici di grande effetto utilizzando un sistema di funzioni molto semplici. La libreria (scritta in JavaScript) si basa su Prototype ed in particolare contiene effetti grafici, una libreria per il cosiddetto Drag and drop e molto altro ancora. Sostanzialmente, grazie a poche righe di codice è possibile sviluppare effetti molto suggestivi come la scomparsa e l'apparizione degli oggetti, il loro trascinamento o l'autocompletamento dei form (come succede nella pagina di google).
L'inclusione nella pagina
Normalmente per usare la libreria è sufficiente includerla interamente:
<script src="scriptaculous.js" type="text/javascript"></script>
Se invece serve solo una parte della libreri si può limitare il caricamento ai soli componenti che servono:
<script src="scriptaculous.js?load=effects,slider" type="text/javascript"></script>
In questo caso sono stati caricati solo l'effetto slider.
Gli effetti
Gli effetti sono vari e si servono tutti della stessa istruzione. Una stringa prototipo potrebbe essere questa
Effect.NomeEffetto('id_elemento', {specifiche});
Fade
Come già detto, essendo una add-on della libreria prototype, script.aculo.us è compatibile con le sue funzioni. Provvederò qui a riportare un esempio di un div che si vuol fare dissolvere tramite un effetto Fade. Ci sono due metodi, che andrò ad illustrare commentando volta per volta il codice (molto semplice).
Effect.Fade('id_elemento', { duration: 1.0 });
In pratica, applica un effetto di dissolvenza all'elemento della pagina chiamato "id_elemento". La durata sarà di un secondo che è valore di default, se non specificato altrimenti.
Con questa sintassi invece
$('id_of_element').fade({ duration: 1.0});
si può utilizzare unicamente se la libreria Prototype è stata caricata nella pagina. La funzione $() rimpiazza il solito "document.getElementById()". Il resto dell'istruzione è uguale all'esempio riportato in precedenza.
Il drag and drop
Ovvero il poter selezionare e spostare elementi per la pagina. Per farlo bisogna inizializzare una nuova istanza chiamata Draggable. Il meglio che questa funzione da è quando la si usa in relazione ad un altro elemento droppable: ovvero un elemento che si può spostare per la pagina e successivamente rilasciare in un apposito spazio (presumibilmente un div). A parte questa soluzione -che offre molti spunti interessanti per rendere le pagine molto dinamiche- ci sono molte proprietà utilizzabile con la classe Draggable. Per l'elenco completo rimando alla documentazione ufficiale.
Un esempio di div draggabile
new Draggable('id_del_div');
Questo esempio conferisce al div con l'id "id_del_div" la possibilità di essere usato come elemento di un drag. Non c'è nulla di specificato, perciò ogni parametro assumerà il suo valore di default. Ad esempio, si potrebbe voler che il div una volta spostato torni alla sua posizione originale. Per fare ciò non si deve far altro che impostare a true la variabile booleana "revert".
new Draggable('id_del_div', { revert: true });
Voci correlate
- Javascript
- AJAX - Asynchronous JavaScript and XML
- Prototype JavaScript Framework - Libreria JavaScript