Wikipédia:NavFrame

Origem: Wikipédia, a enciclopédia livre.
Ir para: navegação, pesquisa
Information icon.svg O recurso NavFrame descrito nesta página tornou-se obsoleto. As predefinições que ainda o utilizam devem ser migradas para o novo plugin jQuery.makeCollapsible disponível no MediaWiki 1.18

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:

Modo de uso[editar | editar código-fonte]

Divs NavFrame[editar | 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 defeito, 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 | 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 | 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 | 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 | editar código-fonte]

Se o título for muito longo, a formatação saí 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 exconder/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>

Collapsible tables[editar | editar código-fonte]

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.

Alinhar[editar | editar código-fonte]

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 | 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.

Navegadores[editar | editar código-fonte]

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.

Ver também[editar | editar código-fonte]

Comparação das predefinições de navegação
collapsible Header color Imagem Grupos Style (body)
parâmetro/s
Exemplos
{{Navbox}} collapsible navbox Esquerda/direita do corpo Sim Sim {{USCongress}}, {{Sistema solar}}
{{Navbox with columns}} collapsible navbox Esquerda/direita de colunas Não Sim {{Senadores dos EUA}}, {{Chéquia}}
{{NavboxAnos}} collapsible navbox Não Não Não {{Wimbledon}}
{{Navbox with collapsible groups}} collapsible navbox Esquerda/direita do corpo e/ou em cada lista Sim Sim {{Universidade de Michigan}}, {{Escotismo}}
Atributos recolhíveis
Tipo CSS classes Javascript Collapses when personalizado
initial state
Nesting
Collapsible tables collapsible Definido em MediaWiki:Gadget-ElementosOcultaveis.js 2 ou mais autocollapse na página Sim Sim