Staffer Group BR™

Fórum interativo totalmente gratuito!


 VisualizaçõesPermissão deste fórum:
Não podes responder a tópicos


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Chorão

Chorão
Membro
Categorias RetráteisTutorial para ter o mesmo efeito das categorias IPBoard 3.43
Versões de funcionamento: Testado apenas em PunBB.

1º Passo - Adicionando o Código CSS
Para começar aceda em Painel de Controle > Visualização > Imagens e Cores > Cores >> Folha de Estilo CSS
Copie e cole código abaixo dentro de sua folha:
Código:
/* Categorias Retráteis */
.main .main-head.collapsed {
    border-radius: 4px 4px 4px 4px;
    opacity: 0.2;
}
.main-head.collapsed:hover {
    opacity: 0.4;
}
.main-head .toggle {
    background: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_minimize.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    outline: 0 none;
    text-indent: -3000em;
    visibility: hidden;
    width: 25px;
}
.main-head:hover .toggle {
    visibility: visible;
}
.main-head.collapsed .toggle {
    background-image: url("http://www.ipbforumskins.com/skindemo/public/style_images/master/cat_maximize.png");
}
/* TUTORIAL = http://staffergroupbr.stuning.net/t1480- */
Valide o CSS.

2º Passo - Adicionando o Código JavaScript
Agora aceda em Painel de Controle > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript >> ( Tutorial - Categorias Retráteis Java10)
Título : Categorias Retráteis SGBR™
Investimento  : No índice e Nos sub-fóruns
Código JavaScript * : Copie e cole código abaixo no campo

Código:
jQuery(document).ready(function () {
  /* TUTORIAL = http://staffergroupbr.stuning.net/t1480- */
  var Count_Toggle = 0;
  jQuery('#main .main .main-head').each(function () {
    jQuery(this).attr('id', 'category_' + Count_Toggle);
    jQuery(this).next().attr('id', 'category_' + Count_Toggle);
    jQuery(this).next().CSS('display', my_getcookie('cat-' + jQuery(this).next().attr('id')));

    jQuery(this).prepend('[url=http://bestskins.forumeiros.com/#' + Count_Toggle + ']Maximizar/minimizar[/url]');

    var Style = jQuery(this).next();
    if (Style.CSS('display') == 'none') {
      jQuery(this).addClass('collapsed');
    } else {
      jQuery(this).removeClass('collapsed');
    }

    jQuery(this).find('.toggle.right').click(function () {
      var Style = jQuery(this).closest('.main-head').next();
      if (Style.CSS('display') == 'none') {
        Style.slideToggle();

        my_setcookie('cat-' + jQuery(this).closest('.main-head').next().attr('id'), 'block', 1, 0);

        jQuery(this).parent().removeClass('collapsed');
      } else {
        Style.slideToggle();

        my_setcookie('cat-' + jQuery(this).closest('.main-head').next().attr('id'), 'none', 1, 0);

        jQuery(this).parent().addClass('collapsed');
      }
    });
    Count_Toggle++
  })
});
Salve o código.

  • Resultado:

Tutorial - Categorias Retráteis Catret10




© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: Daemon
Site: www.bestskins.forumeiros.com

#2
 D'Leandro™

D'Leandro™
Fundador
Olá!

Bem, Na versão PhpBB3 Não funcionou, mas o código antigo que eu tinha de Categorias Retrateis tbm não está funcionando, então penso que talvez possa ser problema com meu fórum.
De qualquer fórma é um bom tutorial e está dentro dos padrões.

Tutorial Aceito;
Este tutorial foi aceito e movido para a área correspondente!


Até mais.

#3
 WareD

WareD
Membro
Vou ver se funciona, obrigado!

#4
 JQuery

JQuery
Membro
kmuyhtdaq

#5
 heitorsimonetti

heitorsimonetti
Membro
obrigaddoo

#6
 Conteúdo patrocinado