WEXTENSIBLE (Galego)

e JS está en <script> na parte inferior da páxina. Aqueles que finalmente vou usar neste sitio non serán estes, senón o que podes ver no seguinte número, versións para este sitio, con algunhas modificacións cuxa motivación explícase sobre ese tema.

Se non o fas Teña tempo para ler o tema ou quere dar un aspecto rápido, aquí ten unha páxina de exemplo co mínimo indispensable, en que código fonte pode ver como inserir o primeiro contenedor con pestanas sobre o tema.

Exemplo: unha liña de pestanas

Este é o código HTML de Esta estrutura:

Como vemos que é unha táboa con 2 filas . No primeiro, poñemos as pestanas nas células de título <th>, alternando unha cela que fará un oco (clase tabcks) e outro co Título da pestana (tabck). No dos buracos poñemos un espazo non separable   para forzar que o ancho do buraco non se modifique. As células que fan que as pestanas identifican engadindo o número ao nome da clase con id="tabck-N" onde n é o número desta pestana. Cada un ten un evento onclick="activarTab(this)" para activar esa pestana.

A segunda fila ten unha única cela que abrangue tantas celas como na primeira fila co atributo colspan="6", xeralmente será de 2n tabulacións contando cos buracos. Entón temos n contedores <div> coa clase tabdiv e identificada do mesmo xeito con .

Coa actualización deste compoñente en marzo de 2014 engadín os atributos data-min e data-max ao Táboa. Tamén identificoi o elemento IV ID = “44C2A95407” que contén o <div class="tabdiv"> con id="tab-N". As versións anteriores seguirán traballando aínda que non contemplen estes cambios, que serven para incluír pestanas dentro dos contedores e tamén para envases con varias filas de pestanas como se verá a continuación. Por agora só imos dicir que o rango dos IDs das pestanas é declarado no data-min e data-max, mentres que a identificación

de id="tab-N" será o primeiro índice deste rango.

O estilo para obter esta estrutura está no encabezado deste Páxina:

A táboa, que ten o modelo de bordo aberto como explicamos, o facemos co fondo transparente para actuar sobre o efecto dos buracos entre as pestanas na parte inferior do recipiente onde está. Para os buracos, as pestanas e a célula inferior teranse en conta a orde no sobrescrito dos bordos. Por suposto, ten que manter a coherencia nas cores usadas. Así, a cor gray é o gris no bordo mentres que o

480BA6BC44 “>

é o gris claro dos fondos.

Finalmente, os contedores div que eventualmente teñen que ter o contido que se presentará de forma adecuada. O estilo anterior é xenérico e serve para todos os contedores. Especificamos o 100% de ancho e a alta será automática. Entón, para cada aplicación, estableceremos as medidas que necesitamos.Polo tanto, para o primeiro exemplo anterior desta páxina temos este estilo que sobrescribe a anterior:

para activar unha pestana e desactivar os demais, temos que usar JavaScript. Este código está no encabezado desta páxina:

No bucle é por un total de pestanas. Polo tanto, comezamos a declarar un máximo de pestanas MAXTABS que poderiamos inserir e por iso non temos que estar cambiando con cada aplicación o límite superior do circuíto interno na función que activa a pestana .. É dicir, este script serve sen tocar-lo por calquera número de pestanas igual ou menos que ese límite.

Despois da actualización de marzo de 2014 e manter a compatibilidade cos contedores existentes, mantemos a operación exposta no anterior parágrafo para non ter que modificar o HTML deses contedores. Con todo usando os atributos data-max e data-min na táboa, xa non será necesario iterar por todos os elementos ata ese límite máximo, Para que poidamos ignorar a variable MAXTABS.

Coa carga da páxina activamos a primeira pestana ou a que queremos. A continuación, a función

execútanos o evento onclick() situado nas pestanas. O argumento trae unha referencia á cela onde se fixo ese clic. Obtemos o identificador que está no camiño id="tabck-N" e extrae o número n con split(). Localizamos o contenedor <div class="tabdiv-N"> para aquela N. A continuación, encaixamos a todas as pestanas activando a corrente e desactivación dos outros. Activámonos con display = "block" e as cores de fondo, bordo e letras desexadas e desactivan igualmente pero con ningún valor para display. Explícanse as pestanas en varias filas a continuación.

Contenedor de pestanas dentro dunha pestana

A actualización de marzo de 2014 deste compoñente foi debido á necesidade de poñer un recipiente de pestanas nunha pestana de outro recipiente. No seguinte exemplo temos un exterior con tres pestanas. No primeiro, poñemos outro recipiente con dúas pestanas.

primeiro

Exemplo:

Exemplo:

O HTML desta estrutura é:

As pestanas están na cabeceira da táboa Os eventos onclick="activarTabB(this, 'p-N') permitiranos activar a pestana n e desactivar o resto. Os contidos están nos corpos <tbody>, onde podemos poñer o número de filas <tr> que queremos. Pero cada fila só terá unha cela <td> que cubrirá tantas columnas como as pestanas declaradas colspan="N" para n pestanas.

Este é o estilo que tamén está no encabezado deste documento:

Este é o JavaScript que tamén está neste documento:

A operación é similar á visto no Sección anterior. Activamos a primeira pestana que queremos coa carga da páxina. A continuación, obtemos o , buscamos o seu pai e logo obtemos a colección de corpos da mesa para iterar por eles. O resto é o mesmo, activando a pestana actual neste caso con tbs.style.display = "table-row-group" e desactivalo con ningún valor.