Wikipédia:NavFrame
 | 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
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
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>
[... O que conteúdo que queres ocultar insere-se aqui ...]
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>
[... O conteúdo aqui aparecerá inicialmente oculto ...]
Exemplo com classes mistas editar
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
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>
[... O conteúdo a ocultar vai aqui ...]
Se o título não cabe numa única linha editar
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>
[... O conteúdo a ocultar vai aqui ...]
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"> </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>
[... Este é o título do conteúdo que queres ocultar ...]
[... O conteúdo a ocultar vai aqui ...]
Tabelas expansíveis editar
Ver artigo principal: Ajuda:ExpandirO 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
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>
Conteúdo adicionado aqui e alinhado à esquerda, em vez de centrado.
O mesmo pode ser feito para alinhar à direita, substituindo left por right.
Limitações editar
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.
Ver também editar
| 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 |
|
| 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 |