Filă (widget)

În informatică, o filă (sau tab strip) este un control grafic ( widget ) numit navigare care permite utilizatorului să treacă de la un grup de controale (sau documente) la altul.

Filele individuale (sau panoul sau cartela sau panoul) sunt reprezentate grafic ca dreptunghiuri care conțin o scurtă descriere. Activarea unei singure file (cu un clic al mouse - ului ) face vizibil conținutul asociat acesteia și, în același timp, activarea acesteia este cumva evidențiată. O singură filă poate fi activată odată.

În unele implementări, filele reacționează la alte evenimente, cum ar fi cursorul sau derularea mouse-ului, tabularea tastaturii.

De obicei, lista de file individuale este plasată imediat deasupra zonei supuse navigării într-o poziție orizontală, dar nu este dificil să le găsiți în partea de jos sau pe laturile orientate vertical.

Utilizare

Filele sunt utilizate în mod obișnuit în ferestrele care au un număr mare de controale grafice, cum ar fi panourile „preferințe”, pentru a evita aglomerarea și pentru a facilita interacțiunea.

Comparație între file și alte metode de navigare pe web

În ultimii ani, acest tip de interfață a devenit foarte popular în browserele web cu numele de filă, panou sau marcaj: introdus mai întâi de browserul Opera și apoi introdus de toate celelalte browsere majore, a dat naștere la ceea ce se numește de obicei navigare către filele .

Exemplu de navigare cu file

Exemplu de filă (2 file deschise) în Google Chrome

Pe internet

Exemplu de meniu cu file cu pagini web în HTML , CSS și Javascript :

 <! DOCTYPE html>
< html >
< cap >
< meta name = "viewport" content = "width = device-width, initial-scale = 1" >
< stil >
body { font-family : Arial ;}

. filă {
  overflow : ascuns ;
  chenar : 1 px solid #ccc ;
  culoare de fundal : # f1f1f1 ;
}

. butonul filă {
  fundal-culoare : mosteni ;
  plutitor : stânga ;
  hotar : nici unul ;
  contur : nici unul ;
  cursor : pointer ;
  căptușeală : 14 px 16 px ;
  tranziție : 0,3 s ;
  dimensiunea fontului : 17 px ;
}
. butonul filă : plasați cursorul {
  culoare de fundal : #ddd ;
}
. butonul filă . activ {
  culoare de fundal : #ccc ;
}
. tabcontent {
  display : none ;
  căptușeală : 6 px 12 px ;
  chenar : 1 px solid #ccc ;
  border-top : none ;
}
</ style >
</ head >
< corp >

< h2 > Filele </ h2 >
< p > Faceți clic pe următoarele file: </ p >

< div class = "tab" >
  < button class = "tablinks" onclick = "openCity (event, 'London')" > Londra </ button >
  < button class = "tablinks" onclick = "openCity (event, 'Paris')" > Paris </ button >
  < button class = "tablinks" onclick = "openCity (event, 'Tokyo')" > Tokyo </ button >
</ div >

< div id = "London" class = "tabcontent" >
  < h3 > Londra </ h3 >
  < p > Londra este capitala Angliei </ p >
</ div >

< div id = "Paris" class = "tabcontent" >
  < h3 > Paris </ h3 >
  < p > Paris este capitala Franței </ p > 
</ div >

< div id = "Tokyo" class = "tabcontent" >
  < h3 > Tokyo </ h3 >
  < p > Tokyo este capitala Japoniei </ p >
</ div >

< script >
funcție openCity ( evt , cityName ) {
  var i , tabcontent , tablinks ;
  tabcontent = document . getElementsByClassName ( "tabcontent" );
  for ( i = 0 ; i < tabcontent . length ; i ++ ) {
    tabcontent [ i ]. stil . display = "none" ;
  }
  tablinks = document . getElementsByClassName ( "tablinks" );
  for ( i = 0 ; i < tablinks . length ; i ++ ) {
    tablinks [ i ]. className = tablinks [ i ]. className . înlocuiți ( „activ” , „„ );
  }
  document . getElementById ( cityName ). stil . display = "bloc" ;
  evt . currentTarget . className + = "activ" ;
}
</ script >
   
</ body >
</ html >

Elemente conexe

Alte proiecte

Wikimedia Commons conține imagini sau alte fișiere în Tab

Portal IT : accesați intrările Wikipedia care se ocupă cu IT