Fórum grátis: Ajuda e suporte para fóruns Forumeiros.com

[TUTORIAL] Criar uma categoria retrátil com javascript

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Categorias e Sub-fóruns

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

[TUTORIAL] Criar uma categoria retrátil com javascript Empty [TUTORIAL] Criar uma categoria retrátil com javascript

Mensagem por nikka em 23.03.14 12:42


[TUTORIAL] Criar uma categoria retrátil com javascript Gestio10
Categoria retrátil

Neste tutorial veremos como podemos ocultar as categorias do fórum, naqueles em que as categorias consomem muito espaço, prejudicando a visualização. Com este tutorial aprenderá a criar um botão para minimizar e maximizar as categorias/sub-fóruns.


--> Tutoriais, dicas e astúcias <--
Categoria retrátil




1º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
[TUTORIAL] Criar uma categoria retrátil com javascript Painel13
[TUTORIAL] Criar uma categoria retrátil com javascript 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Criar uma categoria retrátil com javascript 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Criar uma categoria retrátil com javascript 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Criar uma categoria retrátil com javascript 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.
2º - Código a ser utilizado:
[TUTORIAL] Criar uma categoria retrátil com javascript Php31210 PHPBB3
jQuery(document).ready(function(){var p=0,u='IMAGEM_MINIMIZAR',v='IMAGEM_MAXIMIZAR';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++;});});
[TUTORIAL] Criar uma categoria retrátil com javascript Php21110 PHPBB2
jQuery(document).ready(function(){var p=0,u='IMAGEM_MINIMIZAR',v='IMAGEM_MAXIMIZAR';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++;});});
[TUTORIAL] Criar uma categoria retrátil com javascript Pun1210 PUNBB
jQuery(document).ready(function(){var p=0,u='IMAGEM_MINIMIZAR',v='IMAGEM_MAXIMIZAR';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++;});});
IMAGEM_MINIMIZAR -> Imagem de minimizar a categoria.
IMAGEM_MAXIMIZAR Imagem de maximizar a categoria.

Exemplo de imagens:
[TUTORIAL] Criar uma categoria retrátil com javascript I5HCAxH Minimizar
[TUTORIAL] Criar uma categoria retrátil com javascript LBFBNlE Maximizar



©️ Fórum dos Fóruns e First


[TUTORIAL] Criar uma categoria retrátil com javascript Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Categoria retrátil
nikka

nikka
Membro profissional
Membro profissional

Feminino
Inscrito dia : 17/12/2008
Mensagens : 15621
Pontos Ativos : 19897

Ver perfil do usuário https://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

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

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Categorias e Sub-fóruns

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