wextesible

Tab Container in due file di una tabella

Il primo contenitore della scheda presentato di seguito è quello che è strutturato su una tabella con due righe. Ho messo un esempio qui con 3 schede:

Questo è il codice HTML di Questa struttura:

Come vediamo è un tavolo con 2 righe <tr>. Nel primo mettiamo le schede nelle celle del titolo <th>, alternando una cella che farà una cavità (classe tabcks) e un altro con il Titolo della scheda (tabck). In quello dei fori mettiamo uno spazio non separabile   per forzare che la larghezza del foro non viene modificata. Le celle che effettuano le schede identificano l’aggiunta del numero al nome della classe con id="tabck-N" dove n è il numero di quella scheda. Ognuno ha un evento onclick="activarTab(this)" per attivare quella scheda.

La seconda riga ha una singola cella che copre come molte celle come nella prima riga con l’attributo colspan="6", Generalmente sarà 2-scheggi contando sui fori. Quindi abbiamo n contenitori <div> con la classe tabdiv e identificato allo stesso modo con id="tabdiv-N".

Con l’aggiornamento di questo componente nel marzo 2014 ho aggiunto gli attributi data-min e data-max al Tabella. Ho anche identificato l’elemento IV ID = “44C2A95407” che contiene <div class="tabdiv"> con id="tab-N". Le versioni precedenti continueranno a funzionare anche se non contemplano queste modifiche, che servono a includere le schede all’interno dei contenitori e anche per i contenitori con diverse righe di schede in quanto verrà sottoposto al di sotto. Per ora, diremo solo che la gamma degli ID delle schede è dichiarata in data-min e data-max, mentre N di id="tab-N" sarà il primo indice di quell’intervallo.

Lo stile per ottenere questa struttura è in intestazione di questo Pagina:

La tabella, che ha il modello di bordo aperto come abbiamo spiegato, lo facciamo con lo sfondo trasparente per agire sull’effetto dei fori tra le linguette sul fondo del contenitore in cui è. Per i fori, le ciglia e la cellula inferiore saranno prese in considerazione l’ordine nel sovrascritto dei bordi. Naturalmente, devi mantenere la coerenza nei colori utilizzati. Quindi il colore gray è il grigio sul bordo mentre il rgb(230,230,205) è il grigio chiaro dei fondi.

Infine, i contenitori div Alla fine avere il contenuto da presentare deve essere adeguatamente dimensionato. Lo stile precedente è generico e serve per tutti i contenitori. Specifichiamo largo al 100% e l’alto sarà Auto. Quindi per ogni applicazione stabiliremo le misure di cui abbiamo bisogno.Quindi per il primo esempio precedente di questa pagina abbiamo questo stile che sovrascrive il precedente:

per attivare una scheda e disattivare gli altri dobbiamo usare JavaScript. Questo codice è in intestazione di questa pagina:

nel ciclo è in sé per il totale delle schede. Pertanto abbiamo iniziato a dichiarare un massimo di schede MAXTABS che potremmo inserire e quindi non dobbiamo cambiare con ciascuna applicazione il limite superiore del loop interno nella funzione che attiva la scheda . Cioè, questo script serve senza toccarlo per qualsiasi numero di schede uguali o inferiori a quel limite.

Dopo l’aggiornamento del marzo 2014 e per mantenere la compatibilità con i contenitori esistenti, manteniamo l’operazione esposta nel precedente paragrafo in modo da non dover modificare l’HTML di tali contenitori. Tuttavia, utilizzando gli attributi data-max e data-min nella tabella non sarà più necessario per iterali da tutti gli elementi fino a quel limite massimo, In modo che possiamo ignorare la variabile MAXTABS.

Con il caricamento della pagina attiviamo la prima scheda, o quella che vogliamo. Quindi Esegueci l’evento onclick() situato sulle schede. L’argomento porta un riferimento alla cella in cui è stato fatto il clic. Otteniamo l’identificatore che è nel modo id="tabck-N" ed estrae il numero n con split(). Individuriamo il contenitore <div class="tabdiv-N"> per quel n. Quindi si adattano a tutte le schede attivando la corrente e disattivando gli altri. Attiviamo con display = "block" e lo sfondo desiderato, i colori dei testi e dei testi e disattivare ugualmente ma con Nessun valore per display. Le schede in più righe sono spiegate di seguito.

Tab Container all’interno di una scheda

L’aggiornamento marzo 2014 di questo componente è dovuto alla necessità di mettere un contenitore di ciglia su una scheda di un altro contenitore. Nell’esempio seguente abbiamo un esterno con tre schede. Nel primo mettiamo un altro contenitore con due schede.

Utilizziamo la gamma data-min="100" e data-max="102" a Specificare le tre schede della tabella esterna. Nel <div> della prima scheda, abbiamo messo un’altra tabella interna con la struttura della scheda e utilizzando l’intervallo data-min="200" e data-max="201" delle sue due schede.

Lo stesso script esposto nella sezione precedente è responsabile per iterati dalle schede di ciascun intervallo, limitato a recitare su ciascun contenitore. Come in una pagina possiamo avere molti contenitori per ciglia, per organizzare noi stessi possiamo usare gamme come 0.99, 100..199, 200..299, ecc. Per ciascuno dei contenitori sulla pagina. Particoliamo le larghezze dei due contenitori con questo CSS (situato all’intestazione di questa pagina):

contenitore con diverse righe di schede

e già posizioni con un aggiornamento (marzo 2014 ), poiché non diamo la possibilità di avere diverse righe di schede.

Il codice HTML per questo è come questo:

Prima della tabella deve prendere un attributo data-filas senza Senza valore Quindi vediamo che ci sono tre righe <tr> per le schede. La riga penultima della tabella è la riga attiva. È prima della riga di classe "filadiv" che include il contenuto mostrato e nasconde. Quando clicziamo su una scheda delle righe superiori, abbiamo trasferito quella riga in modo che sarà la riga attiva. Questo pezzo di script è all’interno della funzione esposta in una sezione precedente:

Sottolineiamo anche che possiamo mettere meno schede in una riga.La prima riga ha due schede e gli altri hanno tre. Questo è ottenuto aggiungendo un th separatore (classe "tabcks") con un colspan="2" per coprire 2 colonne, poiché le colonne totali in quell’esempio devono essere 6.

Contenitore scheda nei corpi della tabella

Questa seconda struttura è un po ‘più complessa rispetto a quella precedente perché ogni contenitore di ciascuno La scheda è inclusa in un corpo <tbody> della tabella. Sappiamo che un tavolo ha sempre uno almeno di questi elementi, anche se può essere ignorato quando il codice è scritto. Quindi utilizziamo un’intestazione da tavolo <thead> per individuare le schede e 3 corpi <tbody> per contenitori.

L’HTML di questa struttura è:

Le schede sono all’installazione della tabella . Gli eventi onclick="activarTabB(this, 'p-N') ci consentirà di attivare la scheda N e disattivare il resto. I contenuti sono nei corpi <tbody>, dove possiamo mettere il numero di righe <tr> che vogliamo. Ma ogni riga avrà solo una cella <td> che coprirà tutte le colonne come schede dichiarate colspan="N" per N Tabs.

Questo è lo stile che è anche in intestazione di questo documento:

Questo è JavaScript che è anche in questo documento:

L’operazione è simile a quella vista nel sezione precedente. Attiviamo la prima scheda che desideriamo con il carico della pagina. Quindi otteniamo l’elemento , cerchiamo il tuo genitore e poi otteniamo la raccolta di corpi dalla tabella per iterare per loro. Il resto è lo stesso, attivando la scheda corrente in questo caso con tbs.style.display = "table-row-group" e disattivalo con il valore Nessuna.