Wextensible (Română)

Tab container în două rânduri de masă

Primul container de fila prezentat mai jos este cel care este structurat pe o masă cu două rânduri. Am pus un exemplu aici cu 3 file:

Acesta este codul HTML al Această structură:

Așa cum o vedem este o masă cu 2 rânduri <tr>. În primul prim am pus filele din celulele din titlu <th>, alternând o celulă care va face un gol (clasa ) și altul cu Titlul fila (tabck). În cea a găurilor am pus un spațiu neapară   pentru a forța că lățimea gaurei nu este modificată. Celulele care fac filele identifică adăugarea numărului în numele clasei cu id="tabck-N" unde n este numărul acelei tabele. Fiecare are un eveniment onclick="activarTab(this)" pentru a activa acea filă.

Al doilea rând are o singură celulă care acoperă cât mai multe celule ca în primul rând cu atributul colspan="6", în general, vor fi filele 2N care se numără pe găuri. Apoi am containere n <div> cu clasa iv id = „2d9358f45f” și identificat în același mod cu id="tabdiv-N"

Odată cu actualizarea acestei componente în martie 2014 am adăugat atributele data-min și iv id = „e63bce4153” la Tabelul. De asemenea, am identificat elementul IV ID = „44C2A95407” care conține <div class="tabdiv"> cu id="tab-N". Versiunile anterioare vor continua să funcționeze chiar dacă nu contemplă aceste modificări, care servesc la includerea filelor în interiorul containerelor și, de asemenea, pentru recipiente cu mai multe rânduri de file, deoarece vor fi văzute mai jos. Deocamdată vom spune că gama de ID-uri a filelor este declarată în data-min și data-max, în timp ce al id="tab-N" va fi primul indice al acelei game.

Stilul pentru a obține această structură este la antetul acestui lucru Pagina:

Tabelul, care are modelul de margine deschisă așa cum am explicat, o facem cu fundalul transparent pentru a acționa asupra efectului găurilor între filele din partea inferioară a recipientului unde este. Pentru găurile, genele și celula inferioară vor fi luate în considerare ordinea în suprascrisă a marginilor. Desigur, trebuie să mențineți consistența în culorile utilizate. Deci, culoarea gray este griul de pe margine în timp ce rgb(230,230,205) este gri deschis al fondurilor.

În cele din urmă, containerele div care, în cele din urmă, conținutul de prezentat ar trebui să fie de dimensiuni adecvate. Stilul anterior este generic și servește pentru toate recipientele. Specificăm 100% larg și înălțimea va fi auto. Apoi, pentru fiecare aplicație vom stabili măsurile de care avem nevoie.Deci, pentru primul exemplu anterior al acestei pagini, avem acest stil care suprascrie cel precedent:

pentru a activa o filă și de a dezactiva ceilalți trebuie să folosim JavaScript. Acest cod se află la antetul acestei pagini:

în buclă este ea însăși din totalul tab-urilor. Prin urmare, am început să declarăm un maxim de file MAXTABS că am putea introduce și astfel nu trebuie să ne schimbăm cu fiecare aplicație limita superioară a buclei interioare din funcția care activează fila . Adică, acest script servește fără ao atinge pentru orice număr de file egale sau mai mici decât limita respectivă.

După actualizarea martie 2014 și pentru a menține compatibilitatea cu containerele existente, menținem operațiunea expusă în precedent paragraful pentru a nu trebuie să modifice HTML-ul acestor containere. Cu toate acestea, folosind atributele data-max și data-min în tabel nu va fi necesar să se itereze prin toate elementele până la acea limită maximă, astfel încât să putem ignora variabila MAXTABS.

Cu încărcarea paginii Activăm prima filă sau cea pe care o dorim. Apoi, funcția activarTab(unTab) ne execută evenimentul onclick() Situat pe file. Argumentul aduce o referință la celula în care a fost făcut clicul. Obținem identificatorul care este în modul în care id="tabck-N" și extrage numărul n cu . Localizăm containerul <div class="tabdiv-N"> pentru acel N. Apoi, ne potrivim toate filele prin activarea curentului și dezactivarea celorlalți. Activăm cu display = "block" și culorile dorite de fundal, margine și versuri și dezactivați în mod egal, dar cu nici o valoare pentru display. Taburile din mai multe rânduri sunt explicate mai jos.

Tab container în interiorul unei fila

Actualizarea din martie 2014 a acestei componente a fost datorată nevoii de a pune un container de gene pe o filă de un alt container. În exemplul următor avem un exterior cu trei file. În primul, am pus un alt recipient cu două file.

Noi folosim gama data-min="100" și iv id = „19a0dc79be” la Specificați cele trei file ale mesei exterioare. În fila <div> al primei fila, am pus o altă masă interioară cu structura Tab și folosind intervalul data-min="200" și data-max="201" din cele două file.

Același script expus în secțiunea anterioară este responsabil pentru iterate prin filele fiecărui interval, limitat la acționarea pe fiecare container. Ca într-o pagină putem avea mai multe containere de gene, să ne organizăm noi înșine putem folosi intervale precum 0..99, 100..199, 200..299, etc. Pentru fiecare containere de pe pagină. Particularizăm lățimile celor două containere cu acest CSS (situat la antetul acestei pagini):

container cu mai multe rânduri de file

și deja poziții cu o actualizare (martie 2014 ), pentru că nu dăm posibilitatea de a avea mai multe rânduri de file.

Codul HTML pentru acest lucru este ca acesta:

Mai întâi tabelul trebuie să ia un atribut data-filas fără Fără valoare Apoi vedem că există trei rânduri <tr> pentru tab-uri. Penultimul rând al mesei este rândul activ. Este înainte de rândul clasic "filadiv" care include conținutul afișat și ascuns. Când facem clic pe o filă a rândurilor superioare, am relocat acel rând astfel încât să fie rândul activ. Această piesă de script este în funcția activarTab() expuse într-o secțiune anterioară:

De asemenea, subliniem că putem pune mai puține file la rând.Primul rând are două tab-uri, iar celelalte au trei. Acest lucru se realizează prin adăugarea unui separator

(clasa iv id = „477d2d9aa4” ) cu uncolspan="2"pentru a acoperi 2 coloane, deoarece coloanele totale din acest exemplu trebuie să fie 6.

Tab container în corpuri de masă

Această a doua structură este puțin mai complexă decât cea precedentă, deoarece fiecare container al fiecăruia Fila este inclusă într-un corp <tbody> al tabelului. Știm că o masă are întotdeauna una dintre aceste elemente, deși poate fi ignorată când codul este scris. Așadar, folosim un antet de masă <thead> pentru a localiza filele și 3 corpuri <tbody> pentru containere.

HTML din această structură este:

Taburile se află la antetul mesei Evenimentele onclick="activarTabB(this, 'p-N') ne va permite să activăm fila n și să dezactivați restul. Conținutul se află în corpurile <tbody>, unde putem pune numărul de rânduri iv id = „b977efd7d9” pe care le dorim. Dar fiecare rând va avea doar o celulă <td> care va acoperi cât mai multe coloane ca filele declarate colspan="N" pentru n tab-uri.

Acesta este stilul care este, de asemenea, la antetul acestui document:

Acesta este JavaScript care este, de asemenea, în acest document:

Operația este similară cu cea observată în secțiunea anterioară. Activăm prima filă pe care o dorim cu sarcina paginii. Apoi obținem elementul , căutăm părintele dvs. și apoi obținem colecția de corpuri de la masă pentru a le itera. Restul este același, activând fila curentă în acest caz cu tbs.style.display = "table-row-group" și dezactivați-o cu valoarea de nimic.