JS de Tabela em abas não funciona nos tópicos

2 participantes

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

Tópico resolvido JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 18.02.18 1:53

Detalhes da questão


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

Descrição


Olá

Estou a utilizar os seguintes códigos para gerar um template com abas:

Código:
$(function() {
    // clic sur un onglet
    var d = function() {
        // si l'onglet est déjà actif, ne rien faire
        if ($(this).is(".selected")) return;
        // affiche le contenu correspondant et on met l'onglet en sélectionné
        var a = $(this).closest(".systab");
        a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
        $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
    };
    // pour chacun des systèmes d'onglets
    $("div.systab").each(function() {
        var a = $("> div", this).detach(),
            c = this,
            b;
        // on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
            "tabs" : "contents") + '"></div>');
        $(a).each(function() {
            b = $(this).children(":first");
            b.is("span") ? (
                $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});


Código:
/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}


Código:
<div class="systab">
  <div>
    <span>Mon onglet 1</span>
    Mon contenu 1
  </div>
  <div class="selected">
    <span>Mon onglet 2</span>
    Mon contenu 2
  </div>
  <div>
    <span>Mon onglet 3</span>
    Mon contenu 3
  </div>
</div>

No entanto, embora o código funcione normalmente em áreas externas do fórum como a Home-Page. Ele não funciona dentro do corpo das mensagens, de modo que apenas o CSS e o HTML é aplicado, mas não o JS, este que por sua vez é o responsável por gerir o efeito de abas.

Gostaria de saber se é possível fazer com que o mesmo funcione corretamente dentro das mensagens, além disso se possível, quando a página é atualizada há um pequeno Delay, na qual o código aparece desconfigurado e depois ele se organiza. O mesmo ocorre quando as abas são trocadas. Também queria saber se há um meio de evitar isto.

Embora duas questões tenham sido levantadas, a segunda é apenas uma consideração extra, de modo que a primeira é a que realmente desejo sanar.
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 18.02.18 1:59

Quanto a primeira questão:
Eu não consegui entender realmente qual o efeito desses códigos — o que é necessário de saber para que possamos tentar resolver seu problema.

Quanto a questão do delay:
Infelizmente não há nada que possa ser feito. Isso é uma variante da sua internet.
O delay se dá entre o tempo em que a página começa a carregar e o tempo em que o documento HTML se carregou por completo, juntamente com o JavaScript que está sendo executado.

Se você estiver usando um computador com a internet da NASA, o delay não existirá, por exemplo.

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 18.02.18 2:26

Fala sobre entender o código durante a leitura do Javascript ou sobre o objetivo que ele tem? Caso seja a segunda opção, o JS faz com que as classes do HTML se organizem a fim de tornarem-se algo como um quadro com abas.

Creio que organizando em uma página HTML conseguirá ver melhor, porém caso o problema seja referente a não entender a leitura do JS, somos dois. Eu obtive este código no fórum de suporte francês.

forum.forumactif.com/t310879-tableaux-a-onglets
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 18.02.18 2:29

Peço perdão pela falta de detalhes: eu preciso que o senhor me mostre onde o efeito funciona e onde deveria funcionar.
Sendo assim, precisarei de duas imagens e as posições exatas no seu fórum.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 18.02.18 2:33

Certo!

Onde o código funciona: http://logpose.forumeiros.com/ (Home-page do Forum)

Onde ele deveria funcionar: http://logpose.forumeiros.com/t286-teste#2372 (Dentro do corpo da mensagem dos tópicos)
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 18.02.18 2:36

Código:
= function() {
        // si l'onglet est déjà actif, ne rien faire
        if ($(this).is(".selected")) return;
        // affiche le contenu correspondant et on met l'onglet en sélectionné
        var a = $(this).closest(".systab");
        a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
        $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])

Isso é uma bagunça que poucos somente o autor do código entendem. :S
Prefiro criar um novo código, com uma estrutura HTML diferente. O senhor se importa?

Edit:

Acabei indo pelo bom senso e criei um código novo.

Siga os passos e seja feliz:

  1. Remova o CSS;

  2. Troque todos os HTML's por este:
    Código:
    <div class="fa-tabs-wrapper">
      <div class="fa-tab" data-title="TAB 1">
        Conteúdo da primeira TAB.
      </div>
      <div class="fa-tab" data-title="TAB 2">
        Conteúdo da segunda TAB.
      </div>
      <div class="fa-tab" data-title="TAB 3">
        Conteúdo da terceira TAB.
      </div>
    </div>

    Basicamente, título e link para alterar de tab é o atributo data-title, e o conteúdo, dentro da respectiva div.

  3. Troque o JavaScript por este:
    Código:
    /*globals jQuery*/

    /**
     * Tabs via HTML.
     *
     * @author  Luiz Felipe F. {@link https://lffg.github.io/}
     * @see      {@link http://ajuda.forumeiros.com/t111556-}
     * @license  MIT
     */

    (function($) {
      'use strict';

      $(function() {
        $('.fa-tabs-wrapper').each(function() {
          var $this = $(this);

          var $header = $('<header>', { 'class': 'fa-tabs-header' });

          $this
            .find('.fa-tab')
            .each(function(index) {
              var $tab = $(this);

              if ($tab.is(':first-child')) $tab.attr('data-is-visible', 'true');
              if (! $tab.is(':first-child')) $tab.attr('data-is-visible', 'false').hide();

              $tab.attr('data-index', index);

              $('<a>', {
                'data-is-active': $tab.is(':first-child') ? 'true' : 'false',
                'data-tab-index': $tab.attr('data-index'),
                'class': 'fa-tab-link',
                'text': $tab.attr('data-title')
              })
                .appendTo($header)
                .on('click', function() {
                  $this
                    .find('.fa-tab-link')
                    .attr('data-is-active', 'false')
                  ;

                  $(this).attr('data-is-active', 'true');
                 
                  $this
                    .find('.fa-tab')
                    .not('[data-index="' + index + '"]')
                    .slideUp(200, function() {
                      $this
                        .find('[data-index="' + index + '"]')
                        .slideDown(200)
                      ;
                    })
                  ;
                })
              ;

              $tab.removeAttr('data-title');
            })
          ;

          $header.prependTo($this);
        });

        $('<style>', { 'text': [
          '.fa-tabs-wrapper,',
          '.fa-tabs-wrapper * {',
          '  box-sizing: border-box;',
          '}',
          '',
          '.fa-tabs-wrapper {',
          '  border: solid 1px #000;',
          '  margin: 20px;',
          '  padding-bottom: 15px;',
          '}',
          '',
          '.fa-tabs-wrapper > .fa-tabs-header {',
          '  border-bottom: solid 1px #000;',
          '  margin-bottom: 15px;',
          '}',
          '',
          '.fa-tabs-wrapper > .fa-tabs-header > .fa-tab-link {',
          '  display:  inline-block;',
          '  padding: 10px;',
          '  cursor:  pointer;',
          '  border-right: solid 1px #000;',
          '}',
          '',
          '.fa-tabs-wrapper > .fa-tabs-header > .fa-tab-link[data-is-active="true"] {',
          '  background-color: rgba(0, 0, 0, 0.05);',
          '  cursor: default;',
          '}',
          '',
          '.fa-tabs-wrapper > .fa-tab {',
          '  padding:  0 15px;',
          '}'
        ].join('') }).prependTo('head');
      });
    })(jQuery);


Espero que fique ao seu agrado.

o7
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 18.02.18 5:18

Aqui onde eu moro chamam pessoas como você de Deus Luiz *-

kkkkkk ficou ótimo. Quanto a esse problema do conteudo de cada aba aparecer 1 linha abaixo da anterior, eu consigo arrumar via CSS, ou vai bugar se tentar?
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 18.02.18 12:18

Eu não consegui entender o problema mencionado pelo senhor. Poderia ser um pouco mais específico? o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 18.02.18 15:29

No momento estou no celular então não vou conseguir enviar uma print.... Mas tentarei explicar

O conteúdo da Aba 1 começa normal em relação a tabela.

O conteúdo da Aba 2 funciona normal também, porém, ele começa 1 linha abaixo do que deveria. Como se o conteúdo da aba 1 ainda estivesse ali, porém oculto, mas ainda assim a própria existência da dív forçasse a seguinte à começar abaixo dela.

Outra dúvida, é possível fazer com que a primeira Aba está automaticamente selecionada ao carregar a página ao invés de termos que clicar nela?
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 18.02.18 18:07

Todos esses problemas estão sendo resolvidos pelo código que fiz acima.
Refaça (ou faça) os procedimentos que citei na minha mensagem acima, abaixo do edit.

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 19.02.18 0:55

Não compreendi, eu usei o código do Edit e continuou da mesma forma. Talvez eu tenha me expressado mal?

O código que formulou para mim está funcionando normalmente, porém eu gostaria de saber se é possível fazer com que a TAB1 sempre seja selecionada automaticamente quando a página é carregada. No atual modelo, quando dou F5 o conteúdo aparece totalmente em branco, sem nada sendo apresentado.

Segue a imagem de exemplo: https://i.servimg.com/u/f62/13/77/16/07/img110.png
-----------------------------------------------------------------------------------------------------------

Referente ao problema de cada div estar sendo apresentada em linhas diferente, agora tenho imagens pare representar. Note que cada TAB inicia uma linha abaixo, ou seja, se distancia da linha preta superior do quadro. Gostaria de saber se é possível fazer com que todos fiquem alinhados corretamente.


TAB 1: https://i.servimg.com/u/f62/13/77/16/07/img210.png
TAB 2: https://i.servimg.com/u/f62/13/77/16/07/img310.png
TAB 3: https://i.servimg.com/u/f62/13/77/16/07/img410.png
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 19.02.18 15:58

Olá,

Pode indicar o local onde você aplicou o script (a página em que você tirou as capturas de tela)? o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 19.02.18 16:40

zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 19.02.18 16:48

Isso é um problema das postagens, que adicionam quebras de linha sem ninguém pedir. ¬¬

Enfim, tente trocar o código por este:
Código:
/*globals jQuery*/
 
/**
 * Tabs via HTML.
 *
 * @author  Luiz Felipe F. {@link https://lffg.github.io/}
 * @see      {@link http://ajuda.forumeiros.com/t111556-}
 * @license  MIT
 */
 
(function($) {
  'use strict';
 
  $(function() {
    $('.fa-tabs-wrapper').each(function() {
      var $this = $(this);
 
      var $header = $('<header>', { 'class': 'fa-tabs-header' });
 
      $this
        .find('.fa-tab')
        .each(function(index) {
          var $tab = $(this);

          $this.children('br').remove();
 
          if ($tab.is(':first-child')) $tab.attr('data-is-visible', 'true');
          if (! $tab.is(':first-child')) $tab.attr('data-is-visible', 'false').hide();
 
          $tab.attr('data-index', index);
 
          $('<a>', {
            'data-is-active': $tab.is(':first-child') ? 'true' : 'false',
            'data-tab-index': $tab.attr('data-index'),
            'class': 'fa-tab-link',
            'text': $tab.attr('data-title')
          })
            .appendTo($header)
            .on('click', function() {
              $this
                .find('.fa-tab-link')
                .attr('data-is-active', 'false')
              ;
 
              $(this).attr('data-is-active', 'true');
           
              $this
                .find('.fa-tab')
                .not('[data-index="' + index + '"]')
                .slideUp(200, function() {
                  $this
                    .find('[data-index="' + index + '"]')
                    .slideDown(200)
                  ;
                })
              ;
            })
          ;
 
          $tab.removeAttr('data-title');
        })
      ;
 
      $header.prependTo($this);
    });
 
    $('<style>', { 'text': [
      '.fa-tabs-wrapper,',
      '.fa-tabs-wrapper * {',
      '  box-sizing: border-box;',
      '}',
      '',
      '.fa-tabs-wrapper {',
      '  border: solid 1px #000;',
      '  margin: 20px;',
      '  padding-bottom: 15px;',
      '}',
      '',
      '.fa-tabs-wrapper > .fa-tabs-header {',
      '  border-bottom: solid 1px #000;',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.fa-tabs-wrapper > .fa-tabs-header > .fa-tab-link {',
      '  display:  inline-block;',
      '  padding: 10px;',
      '  cursor:  pointer;',
      '  border-right: solid 1px #000;',
      '}',
      '',
      '.fa-tabs-wrapper > .fa-tabs-header > .fa-tab-link[data-is-active="true"] {',
      '  background-color: rgba(0, 0, 0, 0.05);',
      '  cursor: default;',
      '}',
      '',
      '.fa-tabs-wrapper > .fa-tab {',
      '  padding:  0 15px;',
      '}'
    ].join('') }).prependTo('head');
  });
})(jQuery);
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por zHugh 19.02.18 21:10

Perfeito mestre Jedi !

<3 Resolvido
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: JS de Tabela em abas não funciona nos tópicos

Mensagem por Luiz 19.02.18 21:13

o/

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
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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