JavaScript  »  Guide  »  Guida jQuery UI 

Nell'utilizzo di un sistema operativo, ognuno di noi ha a che fare con il paradigma delle finestre. Sviluppate a partire dai primi anni 80, rappresentano il mezzo principale di presentazione del contenuto, sia esso un messaggio singolo o un insieme di testi, immagini e controlli utente.

Nel web l'utilizzo di questa interfaccia è stato per molto tempo veicolato da controlli nativi del browser e del sistema operativo, con finestre di dialogo e popup. Il vantaggio di queste soluzioni era quello di essere estremamente facili da realizzare, tuttavia la loro derivazione prettamente desktop le rendeva poco integrate con il resto dell'interfaccia web.

Con l'avvento di librerie grafiche come jQuery UI è stato possibile realizzare le finestre a partire da blocchi di HTML e CSS resi interattivi tramite JavaScript.

Il metodo offerto da UI si appoggia sulle interazioni draggable e resizable per garantire le funzionalità tipiche di una finestra in ambiente desktop, e permette la personalizzazione grafica grazie alla completa compatibilità con i temi di Themeroller. Per richiamarlo basta lanciarlo sull'elemento che vogliamo usare come finestra:

$('#finestra').dialog();

Di default il widget verrà aperto automaticamente e realizzerà una finestra con una barra del titolo, un'icona per la chiusura e cinque maniglie di ridimensionamento (i quattro lati più l'angolo in basso a destra). Quando la finestra viene ridimensionata, il contenuto in eccesso è nascosto e appaiono automaticamente delle barre di scorrimento. Ecco un esempio.

Opzioni

Essendo basato su due interazioni di UI, resizable e draggable, .dialog() condivide con loro molte opzioni, tuttavia ne presenta alcune specifiche per la sua personalizzazione:

• autoOpen: (booleano - true)
  definisce se la finestra debba essere aperta automaticamente quando il metodo è richiamato. Nel caso si voglia solo inizializzare il widget, si può impostare questo parametro su false e successivamente mostrarlo con il metodo .dialog('open');
• show / hide: (stringa - null)
  indica una specifica animazione per mostrare e nascondere la finestra. Tenete sempre presente che l'uso di animazioni in questi casi serve per dare maggior risalto al contenuto che stiamo per mostrare e perciò dovrebbero essere utilizzati con parsimonia al fine di non rendere l'interazione troppo pesante;
• buttons: (oggetto - {})
  aggiunge nella parte bassa della finestra dei bottoni. L'opzione accetta un oggetto Javascript in cui la chiave rappresenta il testo del bottone, mentre il valore è una funzione di callback lanciata quando il bottone viene premuto. Il contesto della funzione è la finestra ad esempio:
  

  $('#finestra').dialog({
          buttons : {
              "Annulla": function() { $(this).dialog("close"); }
              [...]
          }
      });

• dialogClass: (stringa - '')
  una classe CSS aggiuntiva per personalizzare graficamente la finestra. Può anche essere una classe offerta dal tema di jQuery UI come alert;
• draggable / resizable: (booleano - true)
  impostando su false queste opzioni, la finestra diventerà rispettivamente fissa oppure non ridimensionabile. Questa opzione potrebbe essere utile per rendere meno pesante in termini di risorse la visualizzazione di piccoli messaggi come gli avvisi, che non necessitano di essere ridimensionati o spostati;
• modal: (booleano - false)
  rende la finestra un controllo modale. In questo modo tutti gli elementi esterni saranno bloccati obbligando l'utente ad interagire con essa. Questo comportamento ricalca quello di funzioni JavaScript come alert() e confirm() ed è molto utile per forzare l'utente secondo un determinato percorso di interazione. L'uso dell'opzione crea un elemento semitrasparente di overlay grande com il documento HTML fra l'interfaccia e la finestra;
• title: (stringa - '')
  Indica il testo da usare come titolo della finestra. In alternativa si può impostare l'attributo HTML title dell'elemento a cui applicheremo il widget.

Per una lista completa delle opzioni fate riferimento alla documentazione ufficiale mentre in questa pagina sono disponibili degli esempi pratici.

Eventi

Come per gli altri widget è possibile interagire con dialog anche attraverso funzioni di callback associabili a specifici eventi che si verificano durante l'interazione fra controllo ed utente:

• beforeclose: lanciato quando l'utente cerca di chiudere la finestra. Se la funzione associata restituisce false, la finestra resterà aperta. Potrebbe essere utile nel caso si voglia verificare che l'utente abbia compilato dei campi di input obbligatori presenti nella finestra;
• open / close: lanciati quando la finestra si apre o chiude;
• focus: lanciato quando la finestra riceve il focus da parte dell'utente (solitamente quando l'utente clicca su di essa);
• dragStart / drag / dragStop: ereditati da draggable vengono lanciati quando la finestra è spostata (inizio, durante, fine);
• resizeStart / resize / resizeStop: ereditati da resizable vengono lanciati quando la finestra è ridimensionata (inizio, durante, fine).

Metodi

Oltre ai metodi comuni a tutti i widget, dialog mette a disposizione alcuni interessanti metodi per interagire con le finestre direttamente via script:

• open / close: con questi metodi è possibile mostrare e nascondere le finestre senza la necessità che l'utente le richiami direttamente;
• moveToTop: quando sono aperte più finestre nella pagina, potrebbero risultare sovrapposte le une alle altre. Con questo metodo è possibile portare in primo piano una delle finestre;
• isOpen: questo metodo restituisce true se la finestra è visibile, altrimenti restituisce false.

Altri articoli

Altre guide

Altre newsletter