script.aculo.us
| script.aculo.us software | |
|---|---|
 | |
| Genere | Libreria software (non in lista) |
| Sviluppatore | Thomas Fuchs |
| Data prima versione | giugno 2005 |
| Ultima versione | 1.9.0 (23 dicembre 2010) |
| Sistema operativo | Multipiattaforma |
| Linguaggio | JavaScript |
| Licenza | Licenza MIT (licenza libera) |
| Sito web | script.aculo.us/ |
script.aculo.us è una libreria JavaScript che permette di creare effetti grafici di grande effetto nei siti web utilizzando un sistema di funzioni molto semplici. La libreria 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 Search).
L'inclusione nella pagina[modifica | modifica wikitesto]
Script.aculo.us è una libreria che comprende parti minori che sono totalmente indipendenti; per questo motivo può essere utile includere nella pagina solo una parte dell'intero framework, per non sovraccaricare eccessivamente il client.
Per poter usufruire dell'intera libreria è sufficiente includerla senza specifiche:
<script src="scriptaculous.js" type="text/javascript"></script>
Se invece serve solo una parte della libreria si può limitare il caricamento ai soli componenti che servono (che andranno posti nella sottocartella 'src'):
<script src="scriptaculous.js?load=effects,slider" type="text/javascript"></script>
In questo caso sono state incluse nella pagina solo le componenti slider ed effects.
Gli effetti[modifica | modifica wikitesto]
Gli effetti sono vari e si servono tutti della stessa istruzione. Una stringa prototipo potrebbe essere questa
Effect.NomeEffetto('id_elemento', {specifiche});
Fade[modifica | modifica wikitesto]
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.
Drag and drop[modifica | modifica wikitesto]
Ovvero il poter selezionare e spostare elementi per la pagina con il trascinamento de mouse. Per farlo bisogna inizializzare una nuova istanza chiamata Draggable. Quando un oggetto draggable viene usato insieme alla proprietà droppable si ottiene l'effetto di trascinare un oggetto per poi buttarlo in un contenitore. È un effetto molto diffuso in siti di commercio elettronico (dove il drag and drop acquisisce il senso di riempire un carrello.
Esempio:
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[modifica | modifica wikitesto]
- JavaScript
- AJAX - Asynchronous JavaScript and XML
- Prototype JavaScript Framework - Libreria JavaScript
Collegamenti esterni[modifica | modifica wikitesto]
- Sito ufficiale, su script.aculo.us.
- Repository sorgenti di Script.aculo.us, su github.com.
- Documentazione ufficiale con demo e tutorial, su github.com.
