jQuery UI, tramite il widget Tabs, permette di integrare nelle nostre pagine un contenitore con all'interno una serie di schede cliccabili, utile sopratutto quando abbiamo dobbiamo mostrare un gran numero di contenuti e vogliamo in qualche modo categorizzarli, in modo che che occupino poco spazio.

Il primo passo per poterlo utilizzare è quello di referenziare i file javascript necessari che, oltre a jQuery e alla libreria Core di jQuery UI, includono jQuery UI Widget e, ovviamente, jQuery UI Tabs:

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/ui/jquery.ui.tabs.js" type="text/javascript"></script>

A questo punto, per impostare il controllo è sufficiente scrivere le poche righe di codice javascript seguenti:

<script type="text/javascript">
  $(function() {
    $("#tabs").tabs();
  });
</script>

Nel nostro caso, specificando il selector #tabs, individuiamo un div tramite il suo ID lato client, che fungerà da contenitore per le varie schede; al suo interno dovranno trovar posto sia i link, che saranno trasformati in intestazioni clickabili, sia i relativi div con il contenuto di ognuna, come nell'esempio seguente:

<div id="tabs">

  <ul>    <li><a href="#generali">Generali</a></li>
    <li><a href="#avanzate">Avanzate</a></li>
    <li><a href="#opzioni">Opzioni</a></li>
  </ul>

  <div id="generali">Qui si trovano le impostazioni generali</div>
  <div id="avanzate">Qui si trovano le impostazioni avanzate</div>
  <div id="opzioni">Qui si trovano le opzioni</div>

</div>

Come possiamo notare, ogni link punta ad un anchor il cui nome è uguale a quello del div corrispondente. jQuery UI, dopo aver risolto con successo tutti i riferimenti, è in grado di rielaborare questo HTML per mostrare l'interfaccia a schede di cui abbiamo bisogno:

Una funzionalità molto interessate permette di memorizzazione dell'ultima scheda visualizzata in un cookie, così che essa sia selezionata per default alla successiva visita dell'utente.

<script type="text/javascript">
  $(function() {
    $("#tabs").tabs({
        cookie: {
        expires: 1 // un giorno
      });
  });
</script>

In questo caso, però, è necessario includere anche il javascript di jQuery Cookie Plugin, disponibile a questo indirizzo.
http://plugins.jquery.com/project/Cookie

Nel caso avessimo bisogno di generare questa struttura dinamicamente, è sufficiente creare un classe che rappresenti una scheda, nei termini di identificativo, intestazione e contenuto.

public class Tabs
{
  public string TabRef { get; set; }
  public string Title { get; set; }
  public string Content { get; set; }
}

Successivamente possiamo utilizzare una coppia di Repeater per realizzare una struttura utilizzabile con jQuery UI Tabs simile a quella, statica, vista in precedenza:

<div id="tabs">
  <ul>    <%-- Intestazioni --%>
    <asp:Repeater ID="Repeater1" runat="server">
      <ItemTemplate>
        <li><a href="#<%#Eval("TabRef") %>"><%# Eval("Title")%></a></li>
      </ItemTemplate>
    </asp:Repeater>
  </ul>

  <%-- Schede --%>
  <asp:Repeater ID="Repeater2" runat="server">
    <ItemTemplate>
      <div id="<%#Eval("TabRef") %>">
        <%# Eval("Content")%>
      </div>
    </ItemTemplate>
  </asp:Repeater>
</div>

Per approfondimenti