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
Certificati TLS gestiti con Azure API Management
Compilare automaticamente applicazioni .NET 6 con le pipeline di Azure DevOps e GitHub Action
Ottimizzare il codice JavaScript con i Shorthand Patterns - prima parte
Introduzione al nuovo tipo TimeOnly di .NET
Eseguire chiamate hedging gRPC con ASP.NET Core 6
Scaling per app con Azure App Service
Creare un'istanza di Azure Service Bus con ARM
Code reviewers as code in GitHub
Usare il throttling per limitare la frequenza degli eventi in Blazor
Compilare un'applicazione .NET Core con una GitHub Action
Utilizzare la keyword with in JavaScript
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Impostare un default custom per i metodi LINQ che tornano il valore di default
- Velocizzare l'installazione delle dipendenze in un workflow di GitHub
- YARP: un reverse proxy in ASP.NET Core
- Sviluppare applicazioni serverless con Azure Container Apps
- Azure Functions e OpenAPI: la coppia perfetta!