Mais de uma categoria por aba

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

Em curso Mais de uma categoria por aba

Mensagem por Zênite em 14/01/19, 11:15 am

Detalhes da questão


Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá deuses dos fóruns! Fiz com sucesso o tutorial para deixar as categorias do meu fórum em abas, porém, surgiu uma ideia nova. Existe a possibilidade de colocar mais de uma categoria por aba?

Atualmente, as categorias encontram-se assim: clique

Eu queria fazer as seguintes abas:

- "Regras do RPG", onde mostraria a categoria Regras do RPG;
- "Registros e Solicitações", onde mostraria as categorias "Registros", "Solicitações" e "Assembleia Geral"
- "Mundo", onde mostraria as categorias País do Fogo e Mundo;
- "Off-topic", onde mostraria a categoria Off-Topic.

Exemplo, clicando em "Registros e Solicitações", as Categorias "Registros", "Solicitações" e "Assembleia Geral" apareceriam: clique

Espero ter explicado direitinho, obrigado desde já e até!
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Mais de uma categoria por aba

Mensagem por RafaelS. em 15/01/19, 12:02 pm

Olá @Zênite

Poderia nos indicar o tutorial que seguiu?

Fico no aguardo. Feliz




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4555
Pontos Ativos : 5618

Ver perfil do usuário http://techmais.forumeiros.com/

Em curso Re: Mais de uma categoria por aba

Mensagem por Zênite em 15/01/19, 01:19 pm

Opa, tudo bom?

Foi esse aqui -> https://ajuda.forumeiros.com/t93894-topic
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Mais de uma categoria por aba

Mensagem por RafaelS. em 15/01/19, 05:35 pm

Olá!

Tudo bom sim, e você?
Após analisar o tutorial e não parece ser esse o código usado em seu fórum. Eu preciso do código para fazer as alterações necessárias.

Fico no aguar




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4555
Pontos Ativos : 5618

Ver perfil do usuário http://techmais.forumeiros.com/

Em curso Re: Mais de uma categoria por aba

Mensagem por Zênite em 15/01/19, 07:01 pm

Que estranho! Tinha certeza que era esse!

De qualquer forma, o javascript é o seguinte:

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);',
  '}'
]));
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Mais de uma categoria por aba

Mensagem por RafaelS. em 16/01/19, 05:34 pm

É realmente o código é bem diferente do tutorial.
De qualquer forma, troque o Javascript atual 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
      }));
    });
    $('.fa-category-controller-item[data-id="1"]').text("Registros e Solicitações");
    $('.fa-category-controller-item[data-id="2"]').hide();
    $('.fa-category-controller-item[data-id="3"]').hide();
    $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)
              ;
              if(id == 1 && $('.forabg[data-category-id="2"].fa-category-visible').length < 1 && $('.forabg[data-category-id="3"].fa-category-visible').length < 1) {
              $('.forabg[data-category-id="2"]').addClass('fa-category-visible').stop().slideDown(450);
                $('.forabg[data-category-id="3"]').addClass('fa-category-visible').stop().slideDown(450);
             }
              else {
                $('.forabg[data-category-id="2"]').removeClass('fa-category-visible').stop().slideUp(450);
                $('.forabg[data-category-id="3"]').removeClass('fa-category-visible').stop().slideUp(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);',
  '}'
]));

Atenciosamente,
Rafael. Feliz




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4555
Pontos Ativos : 5618

Ver perfil do usuário http://techmais.forumeiros.com/

Em curso Re: Mais de uma categoria por aba

Mensagem por Zênite em 16/01/19, 05:49 pm

Olá, o código funcionou para a categoria "Registros e Solicitações", mas "País do Fogo" ainda ficou fora de "Mundo". Existe alguma maneira de juntar os dois também?

Obrigado desde já, até!
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Mais de uma categoria por aba

Mensagem por RafaelS. em 16/01/19, 06:41 pm

Eu sei disso! Fiz apenas um teste para saber se ia dar certo... OK
Troque novamente por este código:

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
      }));
    });
    $('.fa-category-controller-item[data-id="1"]').text("Registros e Solicitações");
    $('.fa-category-controller-item[data-id="2"]').hide();
    $('.fa-category-controller-item[data-id="3"]').hide();
   $('.fa-category-controller-item[data-id="4"]').hide();
    $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)
              ;
              if(id == 1 && $('.forabg[data-category-id="2"].fa-category-visible').length < 1 && $('.forabg[data-category-id="3"].fa-category-visible').length < 1) {
              $('.forabg[data-category-id="2"]').addClass('fa-category-visible').stop().slideDown(450);
                $('.forabg[data-category-id="3"]').addClass('fa-category-visible').stop().slideDown(450);
            }
              else {
                $('.forabg[data-category-id="2"]').removeClass('fa-category-visible').stop().slideUp(450);
                $('.forabg[data-category-id="3"]').removeClass('fa-category-visible').stop().slideUp(450);
            }
         if(id == 5 && $('.forabg[data-category-id="4"].fa-category-visible').length < 1) {
              $('.forabg[data-category-id="4"]').addClass('fa-category-visible').stop().slideDown(450);
            }
              else {
                $('.forabg[data-category-id="4"]').removeClass('fa-category-visible').stop().slideUp(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);',
  '}'
]));

Até mais. Feliz




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4555
Pontos Ativos : 5618

Ver perfil do usuário http://techmais.forumeiros.com/

Em curso Re: Mais de uma categoria por aba

Mensagem por Zênite em 16/01/19, 06:55 pm

Funcionou! Só um bugzinho que eu percebi que quando eu clico em "Mundo" e depois tento mudar para "Off-topic", o Off-topic não abre.

Mas, de qualquer forma, funcionou!
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Mais de uma categoria por aba

Mensagem por RafaelS. em 16/01/19, 07:00 pm

Olá!

Experimente o seguinte código:
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
      }));
    });
    $('.fa-category-controller-item[data-id="1"]').text("Registros e Solicitações");
    $('.fa-category-controller-item[data-id="2"]').hide();
    $('.fa-category-controller-item[data-id="3"]').hide();
  $('.fa-category-controller-item[data-id="4"]').hide();
    $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)
              ;
              if(id == 1 && $('.forabg[data-category-id="2"].fa-category-visible').length < 1 && $('.forabg[data-category-id="3"].fa-category-visible').length < 1) {
              $('.forabg[data-category-id="2"]').addClass('fa-category-visible').stop().slideDown(450);
                $('.forabg[data-category-id="3"]').addClass('fa-category-visible').stop().slideDown(450);
            }
              else if(id == 5 && $('.forabg[data-category-id="4"].fa-category-visible').length < 1) {
              $('.forabg[data-category-id="4"]').addClass('fa-category-visible').stop().slideDown(450);
            }
              else {
                $('.forabg[data-category-id="2"]').removeClass('fa-category-visible').stop().slideUp(450);
                $('.forabg[data-category-id="3"]').removeClass('fa-category-visible').stop().slideUp(450);
                $('.forabg[data-category-id="4"]').removeClass('fa-category-visible').stop().slideUp(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);',
  '}'
]));

Até mais. Feliz




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4555
Pontos Ativos : 5618

Ver perfil do usuário http://techmais.forumeiros.com/

Em curso Re: Mais de uma categoria por aba

Mensagem por Zênite em 16/01/19, 07:03 pm

Agora quando eu clico de "Mundo" para "Registros e Solicitações", nada abre kkkk

E agora??
avatar

Zênite
Nível 6

Masculino
Inscrito dia : 18/12/2018
Mensagens : 62
Pontos Ativos : 92

Ver perfil do usuário http://rikudourpg.forumeiros.com

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