ShiftActif fórum

[TUTORIAL] Categoria retrátil Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Categoria retrátil 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Categoria retrátil 1660898911

[TUTORIAL] Categoria retrátil

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Categoria retrátil Empty [TUTORIAL] Categoria retrátil

Mensagem por MateusV. em Ter 1 Jan - 14:17


[TUTORIAL] Categoria retrátil 34-unk10

Javascript

Neste tutorial iremos aprender como adicionar um código para a função de categorias retráteis.


--> Tutoriais <--
[TUTORIAL] Categoria retrátil



- Estudando o código:
Para que o efeito seja validado temos que adicionar um código Javascript, este código é variado de acordo com as versões dos fóruns:

PHPBB3:
jQuery(document).ready(function(){var p=0,u='IMAGEM_FECHAR',v='IMAGEM_ABRIR';jQuery('.forabg li.header').each(function(){jQuery(this).closest('.forabg').attr('id',p);jQuery(this).closest('.forabg').find('.topiclist.forums').css('display',my_getcookie('cat-'+jQuery(this).closest('.forabg').attr('id')));jQuery(this).append('<img src="'+u+'" id="abrirf" style="float: right;margin-right: 10px;margin-top: -20px;"/>');jQuery(this).find('#abrirf').click(function(){var i=jQuery(this).closest('.forabg').find('.topiclist.forums');if(i.css('display')=='none'){i.slideToggle();jQuery(this).attr('src',u);my_setcookie('cat-'+jQuery(this).closest('.forabg').attr('id'),'block',1,0);}else{i.slideToggle();jQuery(this).attr('src',v);my_setcookie('cat-'+jQuery(this).closest('.forabg').attr('id'),'none',1,0);}});p++;});});




PUNBB:
jQuery(document).ready(function(){var p=0,u='IMAGEM_FECHAR',v='IMAGEM_ABRIR';jQuery('#main .main .main-head').each(function(){jQuery(this).next().attr('id',p);jQuery(this).next().css('display',my_getcookie('cat-'+jQuery(this).next().attr('id')));jQuery(this).append('<img src="'+u+'" id="abrirf" style="float: right;margin-right: 10px;margin-top: -20px;"/>');jQuery(this).find('#abrirf').click(function(){var i=jQuery(this).closest('.main-head').next();if(i.css('display')=='none'){i.slideToggle();jQuery(this).attr('src',u);my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'block',1,0);}else{i.slideToggle();jQuery(this).attr('src',v);my_setcookie('cat-'+jQuery(this).closest('.main-head').next().attr('id'),'none',1,0);}});p++;});});




PHPBB2:
jQuery(document).ready(function(){var p=0,u='IMAGEM_FECHAR',v='IMAGEM_ABRIR';jQuery('.forumline').each(function(){jQuery(this).attr('id',p);jQuery(this).find('td.row1').parent().css('display',my_getcookie('cat-'+jQuery(this).attr('id')));jQuery(this).find('tr:eq(0)').append('<img src="'+u+'" id="abrirf" style="float: right;margin-right: 10px;margin-top: -20px;"/>');jQuery(this).find('#abrirf').click(function(){var i=jQuery(this).closest('.forumline').find('td.row1').parent();if(i.css('display')=='none'){i.slideToggle();jQuery(this).attr('src',u);my_setcookie('cat-'+jQuery(this).closest('.forumline').attr('id'),'block',1,0);}else{i.slideToggle();jQuery(this).attr('src',v);my_setcookie('cat-'+jQuery(this).closest('.forumline').attr('id'),'none',1,0);}});p++;});});

Vermelho -> Imagem de fechar a categoria.
Verde -> Imagem de abrir a categoria.

Exemplo:
[TUTORIAL] Categoria retrátil Tabs_less1 Fechar
[TUTORIAL] Categoria retrátil Tabs_more1 Abrir


- Adicionando o código Js
Agora que já temos o código da versão do nosso fórum vamos adiciona-lo, para isso iremos aceder ao:
Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript -> Adicionar um código Javascript

Investimento:No índice.
Código: O código que estudamos no passo anterior.


- Resultado:
O resultado será como mostrado na imagem:



© ShiftActif


[TUTORIAL] Categoria retrátil Faq10 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Categoria retrátil
MateusV.

MateusV.
Meriteiro
Meriteiro

Masculino
Idade : 20
PointActif's : 2976
ReputActifs : 53
Mensagens : 179
Inscrição : 22/04/2012

Localização : Baker street
100%

http://narutorpgstorm.ultimaterpg.net/forum

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum