expandir

As tabelas expansíveis ou contraíveis (em inglês, Collapsible tables), oferecem um meio de ocultar e mostrar informação numa tabela alternadamente através do botão esconder/expandir.

O código para esta funcionalidade está disponível por padrão no MediaWiki a partir da versão 1.18 na forma de um plugin jQuery, e uma versão antiga ainda é mantida na página MediaWiki:Common.js até que todos as predefinições e páginas que a utilizam tenham sido migradas para o novo sistema.

O estado inicial de qualquer conteúdo expansível pode ser definido como "escondido" ou "expandido" adicionando ou não a classe mw-collapsible (antigamente, apenas collapsible). No estado escondido, a tabela mostra apenas o cabeçalho e um botão para expandi-la.

Exemplo simples

É mais fácil trabalhar com tabelas, uma vez que só é preciso incluir a classe mw-collapsible à tabela. Para que apareça o botão expandir/esconder, a primeira linha da tabela tem que conter um cabeçalho, ou seja uma das células da primeira linha tem que ser aberta com !, ponto de exclamação. No exemplo abaixo, o uso da classe wikitable table-responsive é apenas para definir a aparência da tabela; não é necessário à função que expande e oculta o conteúdo das tabelas.

Código Resultado
{| class="duhoc-pt wikitable table-responsive  mw-collapsible" ! Tabela expansível simples |- | Lorem ipsum dolor sit amet |} 
Tabela expansível simples
Lorem ipsum dolor sit amet

Normalmente usa-se a sintaxe acima, quando deseja-se mostrar somente a informação introdutória, ou o sumário de um texto longo, enquanto se esconde a maioria do conteúdo da vista. O sumário é colocado no cabeçalho, e o conteúdo no corpo da tabela. Para depois ver o conteúdo, basta um clique no botão "expandir". A função collapsible também pode ser usada em tabelas maiores e mais complicadas, desde que haja um cabeçalho na primeira linha dessa tabela.

Código Resultado
{| class="duhoc-pt wikitable table-responsive  mw-collapsible"  |Célula normal na 1ª linha  ! colspan="2"| Cabeçalho ocupando duas colunas  |-  | colspan="2" | Lorem ipsum dolor sit amet  | Célula normal  |} 
Célula normal na 1ª linha Cabeçalho ocupando duas colunas
Lorem ipsum dolor sit amet Célula normal

Ocultar conteúdo por padrão

A definir apenas a classe da tabela como mw-collapsible, a tabela aparece expandida por defeito, mas pode ser contraída pelo leitor. Mas também é possível criar tabelas que aparecem contraídas por defeito, e expandidas pelo leitor. Há varias maneiras de se fazer isto, cada uma dependendo do que se deseja.

"mw-collapsed"

Adicionar a classe mw-collapsed fará com que a tabela apareça sempre contraída, ou seja, com o conteúdo oculto, independentemente de outras definições. É também a maneira mais fácil para ocultar o conteúdo por defeito. Aplicando esta definição aos exemplos acima obtemos:

Código Resultado
{| class="duhoc-pt wikitable table-responsive  mw-collapsible mw-collapsed" ! Tabela expansível simples |- | Lorem ipsum dolor sit amet |} 
Tabela expansível simples
Lorem ipsum dolor sit amet
{| class="duhoc-pt wikitable table-responsive  mw-collapsible mw-collapsed"  |Célula normal na 1ª linha  ! colspan="2"| Cabeçalho de duas colunas  |-  | colspan="2" | Lorem ipsum dolor sit amet  | Célula normal  |} 
Célula normal na 1ª linha Cabeçalho de duas colunas
Lorem ipsum dolor sit amet Célula normal

"autocollapse"

    Nota: Esta opção ainda não está disponível no plugin do MediaWiki 1.18 (bug #30352).

Ao adicionar autocollapse à classe fará com que ela apareça contraída, se existir mais que um determinado número de collapsible tables na página. Aqui na Wikipédia Lusófona, esse houver duas ou mais collapsible tables na página, então ambas aparacem contraídas. No examplo abaixo, a tabela aparece contraída, pois há várias tabelas deste genero nesta página.

Código Resultado
{| class="duhoc-pt wikitable table-responsive  collapsible autocollapse" ! Tabela expansível simples |- | Lorem ipsum dolor sit amet |} 
Tabela expansível simples
Lorem ipsum dolor sit amet

"innercollapse" ou "outercollapse"

    Nota: Esta opção ainda não está disponível no plugin do MediaWiki 1.18 (bug #30352).

Com estas duas classes é possível criar uma tabela contraída por defeito, apenas quando está incorporada dentro de outro objecto, como, por exemplo, outra tabela. Isto é particularmente útil quando se usa uma tabela expansível dentro de outras predefinições.

Código Resultado
{| class="duhoc-pt wikitable table-responsive  outercollapse" ! Esta tabela não contrai |- | Mas tabela dentro desta célula  {| class="duhoc-pt wikitable table-responsive  collapsible innercollapse" ! Contrai-se |- | Ocultando esta frase |}  |} 
Esta tabela não contrai
Mas tabela dentro desta célula
Contrai-se
Ocultando esta frase

Outras notas

Tabelas ordenáveis

Tabelas expansíveis podem ser combinadas com tabelas ordenáveis sem dificuldade.

Código Resultado
{| class="duhoc-pt wikitable table-responsive  mw-collapsible sortable" !Nome!!Pontuação |- |João||59 |- |Joana||100 |- |Xavier||72 |} 
Nome Pontuação
João 59
Joana 100
Xavier 72

Personalização

Utilizadores registados podem editar o common.js deles para mudar algumas da variáveis usadas.

autoCollapse = 4 //número de tabelas expansíveis numa página antes que autocollapse active-se (padrão=2) var collapseCaption = 'collapse' //texto do link [hide] (padrão='esconder') var expandCaption = 'uncollapse' //texto do link [show] (padrão='expandir') 

Outros elementos em HTML

O novo plugin do MediaWiki 1.18 pode ser usado também com outros tipos de elementos que não sejam tabelas, tais como

, ou listas
    e
      . No entanto, a versão antiga do código que torna as tabelas expansíveis e contraíveis funciona apenas em tabelas, por isso as classes collapsible, collapsed, etc, não funcionaram em outros elementos, tais como
      ou . Há uma funcionalidade semelhante para ser usada em
      , de nome "NavFrame". Consulte Wikipédia:NavFrame.

Ver também

Tags:

expandir Exemplo simplesexpandir Ocultar conteúdo por padrãoexpandir Outras notasexpandir Ver tambémexpandirJQueryMediaWikiMediaWiki:Common.jsmw:MediaWiki 1.18

🔥 Trending searches on Wiki Português:

AliExpressNicolás de la CruzJoana Amaral DiasLeviatãTito VilanovaRenascer (2024)BeyoncéCearáXXXTentacionMichael JacksonIndependência do BrasilJesusEquadorShōgun (série de TV de 2024)XogumEstados dos Estados UnidosNaufrágio do RMS TitanicMonteiro LobatoCity Football GroupClub Cerro PorteñoCarlo AncelottiRui TavaresAntónio Sebastião Ribeiro de SpínolaMaltaLista de países por Índice de Desenvolvimento HumanoPeruZinédine ZidaneCampeonato Brasileiro de FutebolAgostinho de Hipona24 de abrilItáliaGolpe de 11 de Março de 1975Efeito estufaMassacre do CarandiruLigue 1RecifeClub de Regatas Vasco da GamaCopa Libertadores da América de 2024Lista das grandes cidades de maior altitude do mundoSérgio ConceiçãoGolpe de 25 de Novembro de 1975GabigolC (linguagem de programação)Guerra Colonial PortuguesaAtaques de 11 de setembro de 2001Sexo oralMartinho LuteroFernando HaddadMuay thaiSteve JobsAmazonas Futebol ClubeHungriaTratado de Versalhes (1919)Elis ReginaRomárioEleições legislativas portuguesas de 2024Copa Sul-Americana de 2024HSantos Futebol ClubeAlma GêmeaRamalho EanesErling HaalandDomingos OliveiraRita MatiasÓscar CarmonaCanal BrasilFernando PessoaVirginia FonsecaO Menino MaluquinhoNazismoXabi AlonsoGrândola, Vila MorenaLuiz Henrique André Rosa da Silva26 de abrilNo Rancho Fundo (telenovela)Países BaixosGênero não binárioCorpus Christi🡆 More