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
Script.aculo.us ha un sistema che vi permette di non includere ciascuna volta tutti i file della libreria, ma solo quelli che vi servono. Includere, nell'ambito della programmazione, vuol dire aggiungere al codice della pagina altre istruzioni presenti in un file esterno. Il sistema è molto semplice, difatti basta inserire nel search (ovvero ciò che segue il ? nell'url) le parti interessate. Quest'ultime sono effects, builder, dragdrop, slider e controls. Cambiano a seconda di ciò che vi serve. Se vi serve un semplice effetto SlideUp, basta la libreria effects. Per il drag and drop l'altra apposita, e così via. Il codice di esempio, molto semplice, è questo
<script src="scriptaculous.js?load=effects,slider" type="text/javascript"></script>
Gli effetti
Gli effetti sono vari e si servono tutti della stessa istruzione. Una stringa prototipo potrebbe essere questa
Effect.NomeEffetto('id_elemento', {specifiche});
Un esempio di effetto 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 });
Questo è un metodo che funziona senza l'ausilio della funzione $() di Prototype. 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.
$('id_of_element').fade({ duration: 1.0});
Invece questa è la sintassi ridotta che si può utilizzare unicamente con Prototype. 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