Script.aculo.us

script.aculo.us software
Genere	Libreria di JavaScript
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/
Modifica dati su Wikidata · Manuale

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).

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 sono vari e si servono tutti della stessa istruzione. Una stringa prototipo potrebbe essere questa

Effect.NomeEffetto('id_elemento', {specifiche});

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.

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 });

• JavaScript
• AJAX - Asynchronous JavaScript and XML
• Prototype JavaScript Framework - Libreria JavaScript

• Sito ufficiale, su script.aculo.us.
• Repository sorgenti di Script.aculo.us, su github.com.
• Documentazione ufficiale con demo e tutorial, su github.com.

Portale Internet: accedi alle voci di Wikipedia che trattano di internet