Como criar jQuery Tabs fora do Markdown

Question

Atualmente estou executando um PHP Content-Management-System base que gera o seu conteúdo HTML com a ajuda de Markdown extra. A maioria do conteúdo é estruturada por rubricas e sub-rubricas que resulta em uma página muito longa. No início de cada página que eu criar uma tabela de conteúdo com a ajuda de uma lista e do Markdown extra Header Id Atributo .

Em oder para encurtar o comprimento de uma exibição de página que eu gostaria de usar o jQuery Tabs Plugin no primeiro nível de títulos.

O problema é que a saída do Markdown extra não é compatível com o o jQuery Tabs Plugin está esperando porque Markdown extra não está envolvendo o conteúdo de uma seção em um div-tag separado.

Existe uma maneira como fazer essas duas bibliotecas trabalhar juntos?

Editar

Isto é o que a saída HTML está parecendo:

 <p>Some intro text...</p>
 <h3>Table of content</h3>
 <ul>
  <li><a href="#sub1">Topic 1</a></li>
  <li><a href="#sub2">Topic 2</a></li>
  <li><a href="#sub3">Topic 3</a></li>
 </ul>
 <h3 id="sub1">Topic 1</h3>
 <p>The content of this topic.</p>
 <h3 id="sub2">Topic 2</h3>
 <p>The content of this topic.</p>
 <h3 id="sub3">Topic 3</h3>
 <p>The content of this topic.</p>

.. e este é o código Markdown correspondente:

Some intro text...

###Table of content###

* [Topic 1](#sub1)
* [Topic 2](#sub2)
* [Topic 3](#sub3)

###Topic 1### {#sub1}

The content of this topic.

###Topic 2### {#sub2}

The content of this topic.

###Topic 3### {#sub3}

The content of this topic.

Solução

Com uma pequena ajuda de I cobbal fez esta declaração jQuery que irá transformar o Markdown marcação em algo que os Tabs plugin irá trabalhar com:

  $("#tabs :header").each(function() 
  {
    var id = $(this).attr("id");
    if(id=="") return;    
    var div = $("<div>");
    var tagName = this.tagName;    
    $(this).nextAll().each(function()
    {
      if(this.tagName==tagName) return false;
      div.append(this);
    });
    $(this).removeAttr("id");
    div.attr("id", id);
    $(this).before(div);
    div.prepend(this);
  });

Mas o fato de que eu preciso para transformar a marcação para ajustar as guias de encaixe em vez de apenas dizer aos Tabs plugin que ele deve selecionar seu conteúdo de uma maneira diferente pode fez esta solução não o ideal.

Answer 1

em seu document.ready

$("#sub1,#sub2,#sub3").each(function() {
    var containerDiv = $("<div>").attr("id", $(this).attr("id") + "div");
    $(this).before(containerDiv);
    containerDiv.append(this);
});

e mudar a sua remarcação para

...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...

Answer 2

Parece-me que você poderia envolver a tabela de conteúdo em uma div si mesmo.

A meio caminho para baixo a página extra Markdown que você ligado a ele mostra como inserir Markdown dentro de uma div, como este:

PHP Markdown extra dá-lhe uma maneira de colocar um texto Markdown-formatado dentro de qualquer tag em nível de bloco. Você pode fazer isso adicionando um atributo de remarcação ao tag com o valor 1 - o que dá remarcação = "1" - assim:

<div markdown="1">
This is *true* markdown text.
</div>

O atributo "1" markdown = será despojado e o ‘conteúdo s será convertido de Markdown para HTML. O resultado final será parecido com este:

<div>

<p>This is <em>true</em> markdown text.</p>

</div>