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.
![Confronto tra i tabs e gli altri metodi di navigazione web](http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Navigation-methods.png/220px-Navigation-methods.png)
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.
![Esempio di navigazione a tab](http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/VisualEditor_Citoid_Automatic_tab-hy.png/280px-VisualEditor_Citoid_Automatic_tab-hy.png)
![Esempio di tab (2 schede aperte) in Chrome](http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Google_chrome_Dino_game_Highest_score.png/280px-Google_chrome_Dino_game_Highest_score.png)
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
Altri progetti
- Wikimedia Commons
Wikimedia Commons contiene immagini o altri file su tab
![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Computer_n_screen.svg/24px-Computer_n_screen.svg.png)