wextensible (Português)

recipiente de guia em duas linhas de uma tabela

O primeiro contêiner de guia apresentado abaixo é aquele que é estruturado em uma tabela com duas linhas. Eu coloco um exemplo aqui com 3 guias:

Este é o código HTML de Esta estrutura:

Como vemos, é uma tabela com 2 linhas <tr>. No primeiro colocamos as guias em células do título <th>, alternando uma célula que fará uma oca (classe tabcks) e outra com o Título da guia (tabck). Naquele dos buracos, colocamos um espaço não separável   para forçar que a largura do orifício não seja modificada. As células que fazem as guias identificam adicionando o número ao nome da classe com id="tabck-N" em que n é o número dessa guia. Cada um carrega um evento onclick="activarTab(this)" para ativar essa guia.

A segunda linha tem uma única célula que cobre quantas células como na primeira linha com o atributo colspan="6", geralmente será 2n tabs contando nos buracos. Em seguida, temos n contêineres <div> com a classe tabdiv e identificado da mesma maneira com id="tabdiv-N".

Com a atualização deste componente em março de 2014 adicionei os atributos data-min e data-max para o mesa. Eu também identifiquei o elemento iv id = “44c2a95407” que contém o <div class="tabdiv"> com id="tab-N". As versões anteriores continuarão a trabalhar, mesmo que não contemplam essas alterações, que servem para incluir guias dentro de contêineres e também para contêineres com várias linhas de guias, uma vez que será visto abaixo. Por enquanto, só diremos que o alcance dos IDs das guias é declarado no data-min e data-max, enquanto o N de id="tab-N" será o primeiro índice dessa faixa.

O estilo para obter essa estrutura está no cabeçalho deste Página:

A tabela, que tem o modelo de borda aberta como explicamos, nós fazemos com o fundo transparente para agir sobre o efeito dos orifícios entre as guias na parte inferior do contêiner onde é. Para os buracos, os cílios e a célula inferior serão levados em conta a ordem na sobrescrita das bordas. Claro, você tem que manter a consistência nas cores usadas. Então a cor gray é o cinza na borda enquanto o rgb(230,230,205) é a cinza clara dos fundos.

Finalmente, os contêineres div Isso eventualmente ter o conteúdo a ser apresentado deve ser adequadamente dimensionado. O estilo anterior é genérico e serve para todos os contêineres. Especificamos 100% de largura e o alto será automático. Em seguida, para cada aplicativo, vamos definir as medidas que precisamos.Então, para o primeiro exemplo anterior desta página, temos esse estilo que sobrescreve o anterior:

para ativar uma guia e desativar os outros que temos que usar o JavaScript. Este código está no cabeçalho desta página:

no loop é em si mesmo pelo total de guias. Portanto, começamos a declarar um máximo de guias MAXTABS que poderíamos inserir e, por isso não precisamos estar mudando com cada aplicação o limite superior do loop interno na função que ativa a guia . Ou seja, este script serve sem tocá-lo para qualquer número de guias igual ou menor que esse limite.

Após a atualização de março de 2014 e para manter a compatibilidade com os contêineres existentes, mantemos a operação exposta no parágrafo para não ter que modificar o HTML desses contêineres. No entanto, usando os atributos data-max e data-min Na tabela, não será mais necessário para iterar por todos os elementos até que o limite máximo, Para que possamos ignorar a variável MAXTABS.

com o carregamento da página, ativamos a primeira guia ou aquela que desejamos. Em seguida, a função activarTab(unTab) Executa o evento onclick() localizado nas guias. O argumento traz uma referência à célula onde esse clique foi feito. Obtemos o identificador que está na maneira como id="tabck-N" e extraia o número N com split(). Localizamos o contêiner <div class="tabdiv-N"> para que n. então nos encaixamos todas as guias ativando a corrente e desativando os outros. Nós ativamos com e as cores desejadas de fundo, borda e letras e desactivate igualmente, mas com nenhum valor para display. As guias em várias linhas são explicadas abaixo.

recipiente de guia dentro de uma guia

A atualização de março de 2014 deste componente foi devido à necessidade de colocar um recipiente de cílios em uma aba de outro recipiente. No exemplo a seguir, temos um exterior com três guias. No primeiro, colocamos outro contêiner com duas guias.

Nós usamos o intervalo data-min="100" e data-max="102" para Especifique as três guias da tabela externa. No <div> da primeira aba, colocamos outra tabela interior com estrutura de tabulação e usando o intervalo data-min="200" e data-max="201" de suas duas guias.

O mesmo script exposto na seção anterior é responsável por iterar pelas guias de cada intervalo, limitada a atuar em cada contêiner. Como em uma página podemos ter muitos contêineres de cílios, para nos organizarmos, podemos usar faixas como 0..99, 100..199, 200..299, etc. Para cada um dos contêineres na página. Quase as larguras dos dois contêineres com este CSS (localizado no cabeçalho desta página):

recipiente com várias linhas de guias

e já posições com uma atualização (março de 2014 ), porque não damos a possibilidade de ter várias linhas de guias.

o código html para isso é assim:

primeiro a tabela deve dar um atributo data-filas sem Sem valor Então vemos que existem três linhas <tr> para tabs. A penúltima linha da tabela é a linha ativa. É antes da linha elegante "filadiv" que inclua o conteúdo mostrado e oculto. Quando clicamos em uma aba das linhas superiores, realizamos essa linha para que seja a linha ativa. Esta peça de script está dentro da função activarTab() Exposta em uma seção anterior:

Também enfatizamos que podemos colocar menos guias em uma linha.A primeira linha tem duas guias e as outras têm três. Isso é conseguido adicionando uma th Separador (classe "tabcks") com um colspan="2" para cobrir 2 colunas, pois as colunas totais nesse exemplo devem ser 6.

contêiner em órgãos de tabela

Esta segunda estrutura é um pouco mais complexa do que a anterior porque cada contêiner de cada A guia está incluída em um corpo <tbody> da tabela. Sabemos que uma tabela sempre tem um pelo menos desses elementos, embora possa ser ignorada quando o código é escrito. Portanto, usamos um cabeçalho de mesa <thead> para localizar as guias e 3 corpos <tbody> para contêineres.

O HTML desta estrutura é:

As guias estão no cabeçalho da tabela . Os eventos onclick="activarTabB(this, 'p-N') nos permitirão ativar a aba N e desativar o resto. O conteúdo está nos corpos <tbody>, onde podemos colocar o número de linhas <tr> que queremos. Mas cada linha só terá uma célula <td> que cobrirá tantas colunas como guias declaradas colspan="N" para n guias.

este é o estilo que também está no cabeçalho deste documento:

Este é o JavaScript que também é neste documento:

A operação é semelhante à vista no seção anterior. Nós ativamos a primeira guia que queremos com a carga da página. Em seguida, obtemos o elemento <tbody> Procuramos o pai e, em seguida, recebemos a coleção de corpos da mesa para iterar por eles. O resto é o mesmo, ativando a guia atual neste caso com tbs.style.display = "table-row-group" e desactive-o com o valor nenhum.