In informatica un tab (o tab strip, letteralmente "striscia di tab") è un controllo grafico (widget) detto di navigazione che permette all'utente di muoversi da un gruppo di controlli (o documenti) a un altro.
I singoli tab (o panel, o scheda, o pannello), vengono rappresentati graficamente come dei rettangoli che contengono una breve descrizione. L'attivazione di un singolo tab (mediante il clic del mouse) rende visibili i contenuti ad esso associati e contemporaneamente viene in qualche modo evidenziata la sua attivazione. Può essere attivato un solo tab alla volta.
In alcune implementazioni i tab reagiscono ad altri eventi, come il passaggio o lo scroll del mouse, la tabulazione da tastiera.
Solitamente l'elenco dei singoli tab viene posto immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale, ma non è difficile trovarli in basso o ai lati orientati verticalmente.
Utilizzo
I tab sono usati comunemente nelle finestre che prevedono una gran quantità di controlli grafici, come ad esempio i pannelli di «preferenze», per evitarne l'affollamento e rendere più facile l'interazione.
Negli ultimi anni questo tipo di interfaccia è diventata molto popolare nei browser web col nome di scheda, pannello o segnalibro: introdotta per prima dal browser Opera e successivamente inserita da tutti gli altri principali browser, ha dato origine a quello che viene comunemente chiamato navigazione a schede.
Nel web Esempio di menu a tab di una pagina web in HTML, CSS e Javascript:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial;}
.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }
.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> </head> <body>
<h2>Tabs</h2> <p>Clicca sui seguenti tab:</p>
<div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">Londra</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Parigi</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div>
<div id="London" class="tabcontent"> <h3>London</h3> <p>London è la capitale dell'Inghilterra</p> </div>
<div id="Paris" class="tabcontent"> <h3>Parigi</h3> <p>Parigi è la capitale della Francia</p> </div>
<div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo è la capitale del Giappone</p> </div>
<script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none";
tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", "");
document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
</body> </html>
Voci correlate Browser web Opera (browser) Navigazione a schede
Altri progetti
Categoria:Interazione uomo-computer