JavaScript  »  Guide  »  Guida jQuery UI 

La caratteristica vincente dei file manager grafici rispetto a quelli testuali o alla riga di comando, è la possibilità di selezionare file e cartelle semplicemente selezionandole con un click del mouse, oppure disegnando un rettangolo su più elementi che vengono raggruppati in un'unica selezione.

Il metodo .selectable() di jQuery UI permette di applicare facilmente questa interazione ad elementi presenti in un interfaccia web, fornendo sia un metodo di selezione multipla "con rettangolo" sia un sistema di selezione di elementi non contigui con l'uso del tasto Ctrl (o Mela) in abbinamento al click sinistro del mouse.

Poter selezionare in questo modo degli elementi fornisce un'interazione più veloce e intuitiva con liste di oggetti rispetto a quelle basate, ad esempio, sui tradizionali checkbox dei moduli (provare per credere).

Opzioni

Le opzioni pù importanti con le quali personalizzare l'interazione sono:

• filter : (selettore - "*")
  permette di identificare specifici elementi da rendere selezionabili, per esempio:

  $("#lista").selectable({filter : "li.selezionabile"});

• delay : (intero - 0)
  millisecondi dopo i quali selezionare un elemento.

• distance : (intero - 0)
  solo dopo che il rettangolo di selezione sarà sovrapposto a un elemento per i pixel specificati questo verrà selezionato. Questa opzione è strettamente legata a quanto impostato in tolerance.
• tolerance : (stringa - 'touch')
  se impostato su 'touch' l'elemento sarà selezionato appena il rettangolo di selezione lo toccherà, altrimenti, se impostato su 'fit', tutto l'elemento dovrà essere all'interno del rettangolo di selezione. Anche in questo caso l'opzione migliore è relativa alle dimensioni dell'area di selezione e degli elementi selezionabili. Touch è spesso la risposta migliore ma con elementi molto concentrati potrebbe rendere difficoltosa e frustrante la selezione. Ecco alcuni esempi.

Eventi

Gli eventi associati a .selectable() sono:

• start / stop: lanciati all'inizio e alla fine dell'interazione.
• selecting / unselecting: lanciati quando un elemento sta per essere selezionato o deselezionato. Potrebbe essere utile per colorarlo diversamente in modo da migliorare il feedback dato all'utente.
• selected / unselected: lanciati su elementi appena selezionati o deselezionati.

Altri articoli

Altre guide

Altre newsletter