Categorias em Abas

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

Atendido / Resolvido Categorias em Abas

Mensagem por zHugh em 03.10.17 19:19

Detalhes da questão


Endereço do fórum: http://pokemonillium.forumeiros.com
Versão do fórum: phpBB3

Descrição


Olá,

Gostaria de saber como posso aplicar o efeito que faz com que as categorias sejam organizadas em abas ao invés de uma embaixo da outra. Logo, a primeira categoria sempre seria aquela em destaque e para visualizar as demais seria necessário clicar em suas respectivas abas.

Fórum em que vi o efeito: http://the-fate-of-ninja.forumactif.com/forum


Última edição por zHugh em 05.10.17 17:42, editado 1 vez(es)
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Ketholy em 03.10.17 19:45

Olá

Siga as seguintes orientações:

Painel de controle>Visualização>Página inicial>Estrutura e hierarquia>

Obs: Basta escolher como deseja visualizar as categorias.

Atenciosamente: Ketholy
Ketholy

Ketholy
Membro do Fórum

Feminino
Inscrito dia : 20/01/2017
Mensagens : 1309
Pontos Ativos : 1582

http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Atendido / Resolvido Re: Categorias em Abas

Mensagem por zHugh em 03.10.17 19:58

Olá Ketholy,

Não me refiro a estrutura na qual as categorias são dispostas. Gostaria de separa-las por abas, de modo que estas abas estariam localizadas acima da primeira categoria, e ao clicar sobre uma delas a categoria principal seria retirada e a nova seria inserida em seu lugar.

Aqui mais alguns fóruns que utilizam isto

http://lazarus-project.forumactif.com/

http://www.twenty-one.eu/forum
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Ketholy em 03.10.17 20:04

@zHugh escreveu:Olá Ketholy,

Não me refiro a estrutura na qual as categorias são dispostas. Gostaria de separa-las por abas, de modo que estas abas estariam localizadas acima da primeira categoria, e ao clicar sobre uma delas a categoria principal seria retirada e a nova seria inserida em seu lugar.

Aqui mais alguns fóruns que utilizam isto

http://lazarus-project.forumactif.com/

http://www.twenty-one.eu/forum

Dê uma olhada nesse Tutorial
Ketholy

Ketholy
Membro do Fórum

Feminino
Inscrito dia : 20/01/2017
Mensagens : 1309
Pontos Ativos : 1582

http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Atendido / Resolvido Re: Categorias em Abas

Mensagem por zHugh em 03.10.17 20:17

Olá,

O Tutorial disponibilizado resolveu parcialmente a questão. As abas foram inseridas, no entanto há dois problemas.

1) Todas as categorias foram ocultas. Eu gostaria que a primeira categoria sempre estivesse naturalmente aberta a fim de facilitar não apenas seu acesso como evitar de tornar o layout do fórum estranho.

2) Gostaria que as abas estivessem localidades abaixo da Home-page (preferencialmente abaixo do chat, já que eu o utilizo na parte superior do forum), não acima (entre logo e homepage)
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Luiz em 04.10.17 21:18

Peço que o senhor desative o código para que possamos bolar um novo seguindo os seus critérios. o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6631
Pontos Ativos : 7529

https://luizfelipe.dev

Atendido / Resolvido Re: Categorias em Abas

Mensagem por zHugh em 04.10.17 23:34

Codigo retirado
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Luiz em 05.10.17 1:50

Troque por este:
Código:
(function ($, css) {
  'use strict';

  $(function () {
   
    var $div = $('<div>', { 'class': 'fa-category-controller' });
   
    $('.forabg').each(function (index, selector) {
      var $this = $(this);
      var title = $this.find('.table-title > h2').text();

      $this.attr('data-category-id', index);
     
      if (index === 0) {
        $this.addClass('fa-category-visible');
       
        $div.insertBefore($this);
        $div.append($('<a>', {
          'href'  : 'javascript:void(0);',
          'class'  : 'fa-category-controller-item fa-category-controller-active',
          'data-id': index,
          'text'  : title
        }));
       
        return;
      }

      $this.hide();
      $div.append($('<a>', {
        'href'  : 'javascript:void(0);',
        'class'  : 'fa-category-controller-item',
        'data-id': index,
        'text'  : title
      }));
    });

    $div
      .children('a')
        .on('click', function () {
          var $this  = $(this);
          var id      = $this.attr('data-id');
          var current = $('.fa-category-visible').attr('data-category-id');

          $('.fa-category-controller-active').removeClass('fa-category-controller-active');
          $this.addClass('.fa-category-controller-active');

          if (id === current) {
            return;
          }

          $('.fa-category-visible')
            .removeClass('fa-category-visible')
            .stop()
            .slideUp(450, function () {
              $('.forabg[data-category-id="' + id + '"]')
                .addClass('fa-category-visible')
                .stop()
                .slideDown(450)
              ;
            })
          ;
        })
    ;

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.fa-category-controller {',
  '  margin: 20px 3px;',
  '}',
  '',
  '.fa-category-controller > a {',
  '  display: inline-block;',
  '  background-color: #2e3133;',
  '  color: #fff;',
  '  padding: 10px;',
  '  border-radius: 2px;',
  '  margin-right: 5px;',
  '  box-shadow: inset 0 2px rgba(255, 255, 255, 0.13);',
  '}'
]));

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6631
Pontos Ativos : 7529

https://luizfelipe.dev

Atendido / Resolvido Re: Categorias em Abas

Mensagem por zHugh em 05.10.17 2:28

Funcionou perfeitamente <3

É possível que eu altere o css a meu gosto sem que interfira com o codigo, correto?
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Luiz em 05.10.17 10:51

Sim. CSS geralmente não altera o comportamento do JavaScript. Feliz
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6631
Pontos Ativos : 7529

https://luizfelipe.dev

Atendido / Resolvido Re: Categorias em Abas

Mensagem por Luiz em 05.10.17 20:20

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6631
Pontos Ativos : 7529

https://luizfelipe.dev

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


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