JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Categoria Retrátil Estilo IPBoard

2 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Categoria Retrátil Estilo IPBoard Empty Categoria Retrátil Estilo IPBoard Dom 02 Jun 2013, 3:36 pm

JScript

JScript
Administradores
Administradores



Categoria Retrátil
Tutorial para ter o mesmo efeito das categorias IPBoard 3.43

Créditos: http://www.invisionpower.com/apps/board/
Partes do código: Daemon
Se alguém mais achar que deve ter o nome nos créditos, fique à vontade!
Se usar e desejar dar créditos, não o faça a mim e sim à invisionpower!



[b] - Adicionando o Código CSS
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 de estilo:
Código:

/* #region ----- Expand/Contrai Categorias ----- */
.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");
}
/* #endregion ----- Expand/Contrai Categorias ----- */
- Adicionando o Código JavaScript
Aceda em:

Painel de Controle
Módulos -> HTML & JAVASCRIPT -> Gestão dos códigos JavaScript -> Criar um novo JavaScript


Título -> category_block block_wrap
Investimento -> No índice
e Nos sub-fóruns

Copie e cole código abaixo no campo Código JavaScript * :
Código:

/* #region ----- Expand/Contrai Categorias ----- */
jQuery(document).ready(function(){
    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++
    })
});
/* #endregion ----- Expand/Contrai Categorias ----- */
- Resultado
Categoria Retrátil Estilo IPBoard Catret10






PunBB Forumeiros


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Categoria Retrátil

http://autoitbrasil.com

2Categoria Retrátil Estilo IPBoard Empty Re: Categoria Retrátil Estilo IPBoard Sáb 12 Out 2013, 3:57 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Não obtive exito com este código não Js

http://wagneraugusto.com.br/

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos