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
Speciale jQuery: Javascript con una marcia in piùhttps://www.aspitalia.com/focuson/1128/Speciale-JQuery-Javascript-Marcia.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Aggiungere interattività lato server in Blazor 8
Copiare automaticamente le secret tra più repository di GitHub
Disabilitare automaticamente un workflow di GitHub
Code scanning e advanced security con Azure DevOps
Gestire undefined e partial nelle reactive forms di Angular
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Utilizzare la session affinity con Azure Container Apps
Miglioramenti nelle performance di Angular 16
Generare file PDF da Blazor WebAssembly con iText
Inizializzare i container in Azure Container Apps
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Come migrare da una form non tipizzata a una form tipizzata in Angular