Saltar para o conteúdo

Wikipédia:NavFrame

Origem: Wikipédia, a enciclopédia livre.

Documentação para caixas de navegação dinâmicas.

Caixas de navegação dinâmicas usam uma combinação de CSS e de Javascript para criar caixas de navegação expansíveis. Os detalhes técnicos estão presentes em MediaWiki:Gadget-ElementosOcultaveis.css e em MediaWiki:Gadget-ElementosOcultaveis.js.

Exemplo:

Divs NavFrame

[editar código-fonte]

O conceito básico consiste em usar a tag HTML Div dentro da linguagem de formatação wiki, de modo a criar conteúdo que o leitor possa esconder ou expandir. A marcação usada para atingir esse fim consiste sobretudo do uso de três classes: NavFrame, NavHead, NavContent.

O exemplo abaixo usa Javascript para adicionar o botão esconder/expandir na NavHead (cabeçalho/barra de título), e tornar o conteúdo oculto ou visível alternadamente. Os web browsers que não suportam javascript, ou que tenham-no desactivado, o conteúdo estará sempre visível e o botão show/link não estará presente.

Por padrão, este código mostra o conteúdo e um link para escondê-lo. Para que o oposto ocorra, que o conteúdo fique escondido inicialmente, use class="NavFrame collapsed" (em vez de class="NavFrame") no div de fora. Não adicione style="display:none;" a NavContent, porque isso impossibilitará a visualização do conteúdo para utilizadores sem Javascript.

Exemplo simples

[editar código-fonte]

Precisas de criar três elementos div:

<div class="NavFrame">
  <div class="NavHead">[... O título da caixa vai aqui ...]</div>
  <div class="NavContent">
    [... O que conteúdo que queres ocultar insere-se aqui ...]
  </div>
</div>

Para esconder o conteúdo inicialmente:

<div class="NavFrame collapsed">
  <div class="NavHead">[... Título da caixa ...]</div>
  <div class="NavContent">
    [... O conteúdo aqui aparecerá inicialmente oculto ...]
  </div>
</div>

Exemplo com classes mistas

[editar código-fonte]

Podes definir outras classes além das referidas acima, de forma a criar uma designed mais estilizado:

<div class="messagebox standard-talk NavFrame">
  <div class="algumaclassealeatória NavHead">
    [... Isto é o título; não tem que ser necessáriamente texto simples, podes ser criativo ...]</div>
  <div class="NavContent outraclasse">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>

Legenda em vez de cabeçalho

[editar código-fonte]

Se trocares a ordem dos dois elementos div interiores, obtens uma legenda sempre visível debaixo do conteúdo opcionalmente escondido, ao invés de um cabeçalho sempre visível:

<div class="NavFrame">
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
  <div class="NavHead">[... Esta é a legenda por debaixo do conteúdo ...]</div>
</div>

Se o título não cabe numa única linha

[editar código-fonte]

Se o título for muito longo, a formatação sai estroncada:

<div style="width: 20em">
<div class="NavFrame">
  <div class="NavHead">[... Este é o título do conteúdo que queres ocultar ...]</div>
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>
</div>

Para corrigir isto, tens que adicionar height: auto à tag style em NavHead div, e algo mais (palha) para deixar espaço para o botão esconder/expandir:

<div style="width: 20em">
<div class="NavFrame" style="width: 20em">
  <div class="NavHead" style="height:auto">
    <div class="hack-to-leave-space" style="float:right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
[... Este é o título do conteúdo que queres ocultar ...]
  </div>
  <div class="NavContent">
    [... O conteúdo a ocultar vai aqui ...]
  </div>
</div>
</div>

Tabelas expansíveis

[editar código-fonte]
Ver artigo principal: Ajuda:Expandir

O estado inicial de qualquer conteúdo expansível pode ser definido usando "collapsible table", porque também permite uma tabela apenas com um conteúdo e cabeçalho.

Para alinhar contéudo à esquerda, adicione

 <div style="text-align: left;">

seguindo por

 </div>

após o conteúdo no fim:

<div class="NavFrame collapsed">
  <div class="NavHead">Alinhar conteúdo à esquerda</div>
  <div class="NavContent">
<div style="text-align: left;">
Conteúdo adicionado aqui e alinhado à esquerda, em vez de centrado.
  </div>
</div>
</div>

O mesmo pode ser feito para alinhar à direita, substituindo left por right.

Limitações

[editar código-fonte]

De momento, as três classes Nav* têm styles próprios. Ao misturar classes, pode acontecer que uma classe cancele outra (no exemplo acima NavFrame está a cancelar os styles de .messagebox.standard-talk).

Esta limitação não afecta collapsible tables.

Todos os navegadores web a partir do Internet Explorar 5.5 e adiante (IE6/7/8, Firefox, Safari/Chrome/KHTML, Opera 8/9, etc.) que suportam JavaScript irão expandir estes elementos correctamente.

O Internet Explorer 5 e outros navegadores que não suportam JavaScript não vão poder ler os elementos, pelo que o botão esconder/expandir não aparecerá e o conteúdo estará expandido.

Comparação das predefinições de navegação
Desmontável Cor de cabeçalho Imagem Grupos Parâmetro/s
de estilo (corpo)
Exemplos
{{Navbox}} desmontável navbox Esquerda/direita do corpo Sim Sim
{{Navbox com grupos anexos}} desmontável navbox Esquerda/direita do corpo e/ou em cada lista Sim Sim
{{Navbox with columns}} desmontável navbox Esquerda/direita de colunas Não Sim
Atributos desmontáveis
Tipo Classes CSS JavaScript Desmonta-se quando Estado inicial
personalizado
Aninhamento
Tabelas expansíveis collapsible Definido em MediaWiki:Gadget-ElementosOcultaveis.js 2 ou mais autocollapse na página Sim Sim