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
Migrare una service connection a workload identity federation in Azure DevOps
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Gestire i null nelle reactive form tipizzate di Angular
Implementare il throttling in ASP.NET Core
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare Model as a Service su Microsoft Azure
Utilizzare il trigger SQL con le Azure Function
Configurare policy CORS in Azure Container Apps
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Eseguire operazioni con timeout in React