JavaScript  »  Guide  »  Guida jQuery UI 

Eventi

Proprio per la complessità del widget, gli sviluppatori ci hanno messo a disposizione una nutrita serie di eventi con i quali interagire per controllare al meglio l'integrazione di tab con gli altri elementi dell'interfaccia e l'insieme dell'esperienza di navigazione:

• select: è lanciato quando viene selezionata una scheda, più precisamente quando è invocato l'evento dell'opzione event (di default click).
• load: lanciato quando il contenuto di una scheda caricato da remoto viene caricato completamente.
• show: lanciato quando una scheda viene mostrata e diventa attiva.
• add / remove: lanciato quando viene aggiunta una nuova scheda
• enable / disable: lanciato quando una tab viene ablitata o disabilitata.

Tutte le funzioni di callback associate agli eventi accettano come argomenti l'evento JavaScript nativo ed un oggetto ui con le seguenti proprietà:

• tab: etichetta della scheda selezionata
• panel: elemento che contiene la scheda corrente
• index: un intero indicante l'indice della scheda selezionata (partendo da 0)

Metodi

Attraverso i metodi specifici per tab è possibile interagire via script con le schede gestite dal widget nonché gestirne il comportamento relativamente alle opzioni di caricamento e aggiunta dinamica di contenuti via AJAX:

• add: attraverso questo metodo è possibile aggiungere una scheda al widget sia associandovi un contenuto già presente nel documento, sia caricandolo da remoto. Al momento non è ancora supportata la possibilità di caricare contenuti da siti esterni (AJAX cross domain).
  Il metodo necessità di due argomenti: il primo di tipo stringa dev'essere un'ancora legata ad un contenuto presente nel documento oppure un URL da cui caricare in modo asincrono un frammento di HTML. Il secondo argomento obbligatorio è una stringa da utilizzare come testo della nuova etichetta. Opzionalmente è possibile passare un indice di tipo numerico per posizionare la nuova scheda in una posizione precisa del widget, che altrimenti sarà inserito in fondo (esempio).
  

  //Carica una nuova scheda da un elemento con attributo
  //name="nuovascheda"       
  $('#tabs').tabs('add','#nuovascheda','Nuova Scheda');
  

  //Carica una nuova scheda da un URL del sito       
  $('#tabs').tabs('add','carica.php','Nuova Scheda');
  

• remove: rimuove dal widget una tab specifica in base al numero di indice passato come argomento (partendo da 0).
  

  //Cancella la prima scheda
  $('#tabs').tabs('remove',0);
  

• select: rende attiva la scheda indicata come ulteriore argomento:
  

  //Rendi attiva la terza scheda
  $('#tabs').tabs('remove',2);

• load: ricarica il contenuto di una specifica scheda caricato dinamicamente. Può essere utile nel caso il contenuto sia soggetto ad aggiornamenti costanti (per esempio un lettore di feed RSS)
• url: cambia l'URL associato ad una scheda dinamica. Necessita di altri due argomenti indicanti rispettivamente la posizione della scheda nel widget (a partire da 0) ed il nuovo indirizzo da cui caricare i contenuti.
• length: restituisce il numero di tab caricate nel widget.
• abort: cancella tutte le richieste AJAX ancora in sospeso per tab caricate dinamicamente.
• rotate: attiva una rotazione automatica fra le schede del widget. Accetta come ulteriori argomenti un intero indicante i millisecondi fra la visualizzazione di una scheda e la successiva, nonché un valore booleano opzionale per stabilire se la rotazione debba essere continua o fermarsi quando l'ultima scheda è divenuta attiva.
  Questo metodo è molto utile quando il widget viene usato come teaser dei contenuti di un sito.

Usi particolari e note di utilizzo

Proprio per la complessità del widget e la possibilità offerta di aggiungere, rimuovere e caricare schede dinamicamente, vi sono alcuni accorgimenti utili da seguire per garantire la migliore fruibilità dei contenuti ed una migliore consistenza nelle funzionalità del widget.

Anzitutto potrebbe essere necessario mantenere la navigazione dei link presenti in una scheda all'interno di quest'ultima, piuttosto che aprirli in una nuova finestra o nella finestra corrente. In tal caso si può ricorrere allo script seguente in fase di inizializzazione del widget:

$('#tabs').tabs({
    load: function(event, ui) {
    $('a', ui.panel).click(function() {
        $(ui.panel).load(this.href);
        return false;
    });
    }
});

In secondo luogo è importante sottolineare che ogni componente che richieda un calcolo sulle sue dimensioni durante l'inizializzazione non funzionerà se caricato in una scheda nascosta, poiché la scheda stessa è nascosta via CSS con display: none. Un accorgimento utile può essere quello di sovrascrivere il CSS nativo di jQuery UI con il seguente:

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

In modo da nascondere le tab inattive semplicemente spostandole al di fuori del viewport. In realtà questa soluzione non è sempre efficace in quanto molto legata allo specifico contesto del layout dell'applicazione.

Altri articoli

Altre guide

Altre newsletter