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

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.

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/

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

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.

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)

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

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?

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

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?

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/

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

Olá,

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

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);

Perfeito mestre Jedi !

<3 Resolvido

o/