JavaScript  »  Guide  »  Guida jQuery UI 

Una parte molto importante dell'interazione fra utenti ed interfaccia riguarda il tipo di interazione da compiere. Nel web "tradizionale" le possibilità in questo campo erano abbastanza limitate e si riducevano quasi esclusivamente al click e alla digitazione da tastiera in campi di form.

Al giorno d'oggi, invece, le librerie UI permettono un'interazione più ricca e molto più vicina a quella diffusa nelle applicazioni desktop. Alcune di queste interazioni riguardano l'ordinamento degli elementi, il loro trascinamento e la selezione. Molti di noi sono ormai abituati al diverso contesto interattivo, ma provate a pensare quanto sia diversa (e più povera) l'interazione che abbiamo con una comune pagina web rispetto al contesto desktop.

In questo capitolo vedremo come alcune interazioni complesse siano rese semplici da implementare grazie ai metodi di jQuery UI.

Sintassi comune

Prima di iniziare a vedere nel dettaglio le interazioni, è utile sottolineare che nella maggior parte dei casi è possibile richiamare ed interagire con i metodi di jQuery UI nello stesso modo. Così, se la sintassi seguente rende trascinabile un elemento con id box (esempio):

$("#box").draggable();

a sua volta il metodo accetta un argomento sotto forma di oggetto JavaScript che permette di personalizzare le opzioni di base. Oltre a tale oggetto, possiamo passare ai metodi degli argomenti come stringa di testo con i quali, ad esempio, disabilitare l'interazione:

$("#box").draggable("disable");

per poi riattivarla passando a .draggable() la stringa "enable".

Se invece volessimo rimuovere definitivamente l'interazione, dovremo passare come primo argomento "destroy".

Un'ultima possibilità è quella di ricavare o impostare un determinato parametro di configurazione anche dopo l'inizializzazione dell'interazione:

$("#box").draggable("option","delay"); //ricava un'opzione

$("#box").draggable("option","delay",500); //imposta un'opzione

Altri articoli

Altre guide

Altre newsletter