16
2008
Como instalar DomTabs
An article by 
Uma tendência nos blogs que chegou com o novo design do Problogger são as domtabs.
DOM Tabs são um sistema de navegação que permite apresentar conteúdo de acordo com a secção que pretendemos e que trás a grande vantagem de permitir incluir mais conteúdo nas páginas usando um espaço que estava antes ocupado por outro conteúdo.
Eu próprio tenho uma versão meio manhosa das DomTabs aqui no MUIOMUIO, podem ver na sidebar a parte que diz “Pesquisa Principiantes e Favoritos“, desta forma caso o utilizador não suporte JavaScript ou não o tenha activado é sempre possível mostrar todo o conteúdo. Durante o tutorial vão ver que as domtabs permitem o mesmo efeito mas no final tenho uma nota a acrescentar que pode alterar tudo.
O tutorial que se segue está direccionado para utilizadores de WordPress mas os passos a seguir para outras plataformas são básicamente os mesmos com óbvias alterações no código que se refere a mostrar o conteúdo.
Como instalar domtabs em 5 passos
- Primeiro tens de fazer download do script. Neste preciso momento a versão é a 3.1415927.
- Agora deves colocar o ficheiro domtab.js na mesma directoria do teu theme.
- O código HTML do domtab tem classes próprias:
tabClass:'domtab', // class que acciona o sistema de navegação por tabs
listClass:'domtabs', // class dos menus
activeClass:'active', // class do link actual
contentElements:'div', // elementos reconhecidos pelo procedimento continuo que permitem separar as tabs
backToLinks:/#top/, // padrão que permite verificar se o utilizador quer voltar ao topo (menu) das tabs
printID:'domtabprintview', // id atribuida ao link para imprimir tudo
showAllLinkText:'show all content', // texto para o link de imprimir tudoUtilizando estas tabs podes através do CSS adaptar as domtabs ao teu layout. No final disponibilizo o download dos ficheiros onde está incluido um ficheiro CSS com o básico para editar o domtabs. Depois é uma questão de testares.
- Agora, no wordpress, edita o ficheiro header.php e entre as tags <head></head> coloca o seguinte código:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />
Ambos os ficheiros estão disponíveis para download no final do artigo.
- Agora edita o ficheiro onde queres colocar as domtabs, provavelmente será sidebar.php mas há quem as coloque noutro local. Insere o seguinte código:
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Primeira TAB: Aqui inseres o conteúdo da tab</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Segunda TAB: Aqui inseres o conteúdo da tab</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Terceira TAB: Aqui inseres o conteúdo da tab</p>
</div>
</div>
Agora guarda o ficheiro e testa. Caso queiras adicionar uma nova tab basta copiares o texto a partir dos DIVs, por exemplo:
Adicionar uma quarta tab
<div>
<a name="t4" id="t4"></a>
<p>Tab 4: Aqui inseres o conteúdo da tab</p>
</div>
E pronto agora deverás ter as domtabs a funcionar correctamente.
Nota:
Caso as tuas domtabs não funcionem correctamente, seja qual for o motivo, coloca o conteúdo delas dentro de um ficheiro á parte como tab1.php e depois usa a função include para incluires esse ficheiro onde queres.
Quero incluir uma nuvem de tags usando uma função dada pelo WordPress ou um Plugin:
- Crio o ficheiro tab1.php e dentro dele incluo a tag: wp_tag_cloud();
- Agora na tab coloco o código para chamar esse ficheiro
<div>
<a name="t1" id="t1"></a>
<?php include('tab1.php'); ?gt;
</div>
Agora testa e já deve correr tudo correctamente
Link úteis:
Domtabs – http://www.onlinetools.org/tools/domtabdata/
Ficheiros do tutorial + tutorial: http://www.box.net/shared/abzaqv9k48
Alternativas ao domtabs: idTabs / jQuery Tabs 3
2 Comments + Add Comment
Leave a comment
Advertisement
Seguidores
603
899
244
1746
Newsletter
Subscreve as feeds
[...] agora apenas faço referencia ás domtabs na sidebar e live comment preview e a mascote que ainda não tem nome portanto aceitam-se [...]
Boas. Tentei instalar as domtabs num novo blog que estou a fazer e acontece-me um problema que não estou a conseguir resolver.
A domtab funciona bem na index mas depois quando vou para uma página de um artigo o link das tabs aparece com o link do próprio artigo e as domtabs não funcionam.
O link na index aparece assim http://site/#t1 e na página do artigo aparece assim http://site/artigo/#t1
Será que me podes ajudar??
Abraços