[TUTORIAL] Criar uma categoria retrátil
Página 1 de 1 • Compartilhe
[TUTORIAL] Criar uma categoria retrátil
A versão Invision possui um tipo de categoria inovadora, que permite que você contraia e descontraia quando desejar, o que torna a página mais limpa e de fácil visualização. Este recurso agora passa a não ser mais exclusivo desta versão, podendo ser utilizado em todas.
1º - Entender o funcionamento e o código que será usado:
Primeiramente devemos compreender como funcionará! Quando você clicar no nome da categoria, a mesma irá se contrair, ao carregar novamente, esta será exibida. Caso não funcione quando colocar, isso acontece pois para que funciona perfeitamente, terá de aceitar cookies em seu navegador.
Vamos ver o código que teremos de usar, este não precisa ser modificado:
2º - Adicionar o código:
Como este código é uma forma de contornar uma situação, ele terá de ser adicionado de um modo especial também. Este código deverá ser adicionado em um fórum de cada categoria. Por exemplo, tendo em conta a seguinte estrutura:
Basta que adicione no campo "Descrição", que se encontra em:
Painel de controle -> Geral -> Fórum -> Categorias e fóruns
1º - Compreender como funciona a edição de templates:
2º - Fazer as modificações nos templates:
1º - Compreender como funciona a edição de templates:
2º - Fazer as modificações nos templates:
--> Tutoriais e astúcias <--
Criar uma categoria retrátil
Criar uma categoria retrátil
Versão PhpBB 3 |
1º - Entender o funcionamento e o código que será usado:
Primeiramente devemos compreender como funcionará! Quando você clicar no nome da categoria, a mesma irá se contrair, ao carregar novamente, esta será exibida. Caso não funcione quando colocar, isso acontece pois para que funciona perfeitamente, terá de aceitar cookies em seu navegador.
- Lembre-se de que o fórum escolhido deverá ser visível para todos os níveis de usuário;
- Verifique se o modo HTML está desativado para que não hajam erros, ele estará desativado quando o botão for: ;
Vamos ver o código que teremos de usar, este não precisa ser modificado:
- Código:
<script type="text/javascript">var pvf= document.getElementById('main-content').firstChild; while(pvf.className!='forabg' && pvf.className!='h3' && (pvf=pvf.nextSibling) ); var i= 1; while(pvf && pvf.className=='forabg') { vf=pvf.firstChild.firstChild.nextSibling; vf.firstChild.style.cursor='pointer'; vf.firstChild.id='catret'+(i++); vf.firstChild.onclick=function() { if(parseInt(my_getcookie(this.id))==1) { my_setcookie(this.id,'0',0,0); this.parentNode.nextSibling.style.display='block'; } else { my_setcookie(this.id,'1',1,0); this.parentNode.nextSibling.style.display='none'; } }; if(parseInt(my_getcookie(vf.firstChild.id))==1) vf.nextSibling.style.display='none'; pvf= pvf.nextSibling; } </script>
2º - Adicionar o código:
Como este código é uma forma de contornar uma situação, ele terá de ser adicionado de um modo especial também. Este código deverá ser adicionado em um fórum de cada categoria. Por exemplo, tendo em conta a seguinte estrutura:
O código terá de estar ou no Fórum 1 ou no Blog 1, para que tenha efeito na primeira categoria, pois ele tem de estar em um dos fóruns da categoria. Já para a categoria 2, o código deverá estar ou no fórum 2 ou no Blog 2.Categoria 1Fórum 1
Categoria 2
Blog 1Fórum 2
Blog 2
Basta que adicione no campo "Descrição", que se encontra em:
Painel de controle -> Geral -> Fórum -> Categorias e fóruns
Versão PhpBB 2 |
1º - Compreender como funciona a edição de templates:
Para que possamos prosseguir om o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja: Modificar os templates do fórum |
2º - Fazer as modificações nos templates:
- Template index_box
Encontrar:- Código:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
- Código:
<script type="text/javascript">var num= 0;</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr id="currenttr" onClick="i= 0; e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR') e[i].style.display=(e[i].style.display=='none')?'':'none'; retour=(my_getcookie(this.id)=='true')?'false':'true'; my_setcookie(this.id,retour, 1, 0);" style="cursor:pointer;">
Encontrar:- Código:
<!-- BEGIN tablefoot -->
</table>
- Código:
<!-- BEGIN tablefoot -->
</table><script type="text/javascript"> document.getElementById('currenttr').id='trfrm'+num; if(my_getcookie('trfrm'+num)=='true') { i= 0; e=document.getElementById('trfrm'+num).parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display='none'; } num++;</script>
Versão PunBB |
1º - Compreender como funciona a edição de templates:
Para que possamos prosseguir om o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial. Para isso, veja: Modificar os templates do fórum |
2º - Fazer as modificações nos templates:
- Template index_box
Encontrar:- Código:
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">
Substituir por:- Código:
<div class="main"><script type="text/javascript">var num= 0; var curc;</script>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div class="page-title" id="cret">{catrow.tablehead.L_FORUM}</div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content">
<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>
©
Fórum dos Fóruns & Etana
Fórum dos Fóruns & Etana
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Criar uma categoria retrátil |
Tópicos semelhantes
» [TUTORIAL] Criar uma categoria retrátil com javascript
» Criar uma categoria retrátil
» Criar uma categoria retrátil
» Criar uma categoria retrátil
» Criar uma categoria retrátil com JS
» Criar uma categoria retrátil
» Criar uma categoria retrátil
» Criar uma categoria retrátil
» Criar uma categoria retrátil com JS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos