Как создать вкладки jQuery из Markdown

В настоящее время я использую систему управления контентом на основе PHP, которая генерирует свой HTML-контент с помощью Дополнительная уценка. Большая часть контента структурирована заголовками и подзаголовками, что приводит к очень длинной странице. В начале каждой страницы я создаю оглавление с помощью списка и Markdown Extras. Атрибут идентификатора заголовка.

Чтобы сократить продолжительность просмотра страницы, я хотел бы использовать jQuery Плагин Tabs на первом уровне заголовков.

Проблема в том, что вывод Markdown Extra несовместим с тем, что jQuery < href="http://docs.jquery.com/UI/Tabs" rel="nofollow noreferrer">Плагин вкладок ожидает, потому что Markdown Extra не заключает содержимое раздела в отдельный тег div.

Есть ли способ заставить эти две библиотеки работать вместе?

РЕДАКТИРОВАТЬ

Вот как выглядит вывод HTML:

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

.. и это соответствующий код Markdown:

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.

Решение

С небольшой помощью cobbal я сделал этот оператор jQuery, который преобразует разметку Markdown во что-то, с чем будет работать плагин Tabs:

  $("#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);
  });

Но тот факт, что мне нужно преобразовать разметку, чтобы она соответствовала плагину Tabs, а не просто сказать плагину Tabs, что он должен выбирать свой контент по-другому, может сделать это решение не идеальным.


javascript jquery tabs markdown
person Martin    schedule 06.03.2009    source источник
comment
Не могли бы вы опубликовать пример кода того, как выглядит вывод уценки Extra?   -  person Pim Jager    schedule 06.03.2009

Ответы (2)


arrow_upward
2
arrow_downward

на вашем документе.готово

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

и измените уценку на

...
* [Topic 1](#sub1div)
* [Topic 2](#sub2div)
* [Topic 3](#sub3div)
...
person cobbal    schedule 07.03.2009
comment
это только завершит заголовки в div .. но все равно спасибо, основываясь на вашей подсказке, я смог сделать свой собственный оператор jQuery - person Martin; 08.03.2009

arrow_upward
0
arrow_downward

Мне кажется, что вы могли бы сами обернуть оглавление в div.

На полпути вниз страницы Markdown Extra, на которую вы ссылались, показано, как вставить Markdown внутрь div, например:

PHP Markdown Extra дает вам возможность поместить текст в формате Markdown внутри любого тега блочного уровня. Вы делаете это, добавляя к тегу атрибут уценки со значением 1, что дает markdown="1" - вот так:

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

Атрибут markdown="1" будет удален, а содержимое будет преобразовано из Markdown в HTML. Конечный результат будет выглядеть так:

<div>

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

</div>
person Julian    schedule 06.03.2009
comment
Но это нарушило бы ремонтопригодность, которую я искал, когда начал использовать Markdown... - person Martin; 07.03.2009