Tab (widget)
In informatica un tab (o tab strip, 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
Altri progetti
Wikimedia Commons contiene immagini o altri file su tab
