Автоматическое оглавление на jQuery

К любой большой странице с четким и хорошо сконструированным контентом желательно, а иногда и необходимо, добавлять оглавление. Оглавление в вебе позволяет быстро перейти к нужному разделу (секции). Конечно, вы можете создать оглавление вручную, но будет гораздо умнее построить такое оглавление на лету, используя javascript. Это справедливо по нескольким причинам:

• Это проще - единожды написав javascript, вы получаете возможность создавать оглавление везде, где бы вам ни захотелось.
• Это более надежно - оглавление не зависит от ошибок автора.
• Доступность - оглавление отлично вписывается в концепцию доступности сайта в интернете.

Такого рода вещи, как оглавление, делались множество раз и совершенно разными способами. В этой статье приведен еще один, основанный на использовании jQuery.

HTML: заголовки и id

Отдельный части большой по высоте страницы, на которые вы хотите ссылаться, можно разметить разными способами. Возможно страница FAQ построена на основании dl. Это может быть секция (section) после секции. В нашем случае мы располагаем следующей структурой:

HTML

<article>

   <h3 id="question-one">Title of Question</h3>
   <!-- любой возможный контент -->

   <h3 id="question-two">Another Question</h3>
   <!-- любой возможный контент -->

   <!-- и т.д. -->

</article>

Обычные заголовки с идентификаторами (id) и контентом между ними. Отметьте Id. Они уникальные, как, в принципе, все хорошие идентификаторы. Они нам потребуются, так как идентификаторы обеспечивают нас целью для ссылки.

Ссылка выглядит так:

<a href="#question-one">Link to Question One</a>

При клике по вышеприведенной ссылке мы перейдем к элементу с id = 'question-one'.

Строим оглавление при помощи jQuery

Наша цель вставить на страницу HTML в виде оглавления, наподобие следующего:

HTML

<nav role="navigation" class="table-of-contents">
  <h2>On this page:</h2>
  <ul>
    <li><a href="#question-one">Question One</a></li>
  </ul>
</nav>

Шаг 1: строка HTML

Оглавление будет строиться динамически. Для начала нам потребуется создать простую строку, которая состоит из html-разметки оглавления (первая часть). Несколько тегов остались не закрытыми, мы закроем их позже.

jQuery

var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>On this page:</h2>" +
    "<ul>";

Шаг 2: Цикл через заголовки

Теги h3 указывают на секции, к которым мы перейдем, кликнув по ссылке; итак нам понадобится отобрать все заголовки при помощи выборки jQuery и затем перебрать все заголовки в цикле.

jQuery

$("article h3").each(function() {

  // цикл

});

Шаг 3: Получаем нужные данные

Нам потребуется: текст каждого заголовка, который мы превратим в ссылку; id каждого заголовка мы будем использовать в атрибуте href уже созданных ссылок.

jQuery

var el, title, link;

$("article h3").each(function() {

  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

});

Внутри цикла this это заголовок. Далее мы просто отбираем текст и id каждого заголовка.

Шаг 4: Создаем новый элемент списка и присоединяем его к строке.

jQuery

var newLine, el, title, link;

$("article h3").each(function() {

  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

  newLine =
    "<li>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;

});

"+=" означает, что нам нужно присоединить новую строку к уже существующей строке.

Шаг 5: Закрываем шаблон

jQuery

ToC +=
   "</ul>" +
  "</nav>";

Шаг 6: Вставляем HTML на страницу

$("article").prepend(ToC);

Сейчас вам потребуется решить, куда вставлять оглавление. Полагаю, самое разумное решение это верхняя часть страницы.

В нашем примере оглавление вставляется в начало элемента article.

Источник