Автоматическая генерация содержания для статьи

Если материал, размещенный на странице достаточно длинный, то очень удобной опцией будет содержание, размещенное в фиксированном месте и обеспечивающее быстрый переход к нужной части. В данном уроке мы сделаем автоматически генерируемое содержание с помощью нескольких строк кода.

Выделяем информацию из HTML

Начнем с простого примера - получим заголовки и подзаголовки и выведем их непосредственно перед статьей.

<div id="toc"></div>
    <div id="content">
    <h1>Заголовок</h1>
    <h2>Подзаголовок</h2>
    <p>Текст статьи ...</p>
</div>

Элемент div с id "toc" будет контейнером для ссылок содержания (он также может быть добавлен динамически, но для данного примера мы будем использовать статическую структуру). Пример статьи помещен в элемент div с id "content".

Теперь создадим содержание. Сначала добавим параграф с текстом "Содержание статьи" в контейнер "toc". Подобный стиль оформления можно встретить в некоторых блогах. Затем найдем все элементы H1, H2 и H3 и назначим каждому из них уникальные id (для данной страницы). Таким образом, к ним можно будет перейти, просто нажав кнопку мыши на соответствующем элементе в содержании. И, наконец, добавим ссылку на каждый из них в содержание.

$("#toc").append('<p>Содержание статьи:</p>')
$("h1, h2, h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    $("#toc").append("<a id='link" + i + "' href='#title" +
        i + "' title='" + current.attr("tagName") + "'>" + 
        current.html() + "</a>");
});

Данный скрипт будет формировать следующий код HTML:

<div id="toc">
<p>Содержание статьи:</p>
<a id="link0" title="H1" href="#title0">Заголовок статьи.</a>
<a id="link1" title="H2" href="#title1">Заголовок. Уровень 2.</a>
<a id="link2" title="H3" href="#title2">Заголовок. Уровень 3.</a>
<a id="link3" title="H3" href="#title3">Заголовок. Уровень 3. Еще один.</a>
<a id="link4" title="H3" href="#title4">Заголовок. Уровень 3. И еще один.
</a>
</div> 

А заголовки будут иметь вид, подобный вид:

<h1 id="title0">Заголовок статьи</h1>

Демонстрация 1.

Фиксируем положение содержания

Чтобы зафиксировать положение содержания нужно сделать два шага. Первый, поместить содержание и контент в элемент div и отцентрировать его на экране (вы можете поместить содержание где угодно, но в данном примере мы зафиксируем его слева от контента).

<div id="container">
    <div id="toc"></div>
    <div id="content">
        <h1>Заголовок статьи</h1>
        <h2>Подзаголовок статьи</h2>
        <p>Текст статьи ...</p>
    </div>
</div> 

Второй шаг, установить для элемента с id "toc" свойству float  значение left с фиксированным положением, а для элемента с id "content" установить свойству float значение right.

#container { width:960px; overflow:hidden; margin:0px auto; position:relative;}
#content { width:660px; float:right;}
#toc { width:200px; position:fixed; float:left;}
#toc a { display:block; color:#0094FF;}

Таким образом, содержание останется на экране в фиксированном месте при прокручивании содержания страницы.

Демонстрация 2.

Масштабируем содержание

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

Демонстрация 3.

Модифицируем скрипт из предыдущей демонстрации:

$("h1, h2, h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    
    var pos = current.position().top / $("#content").height() * $(window).height();
    $("#toc").append("<a id='link" + i + "' href='#title" + i +
    "' title='" + current.attr("tagName") + "'>" +
    current.html() + "</a>");
    
    $("#link" + i).css("top", pos);
});

Данный код определяет положение каждого заголовка (current.position().top) и задает масштаб для заполнения структуры содержания. После добавления ссылок  HTML, новое положение задается с помощью CSS. Ссылки HTML позиционируются абсолютно. Также каждый тип заголовков имеет различный масштаб шрифта. CSS для Демонстрации 3 выглядит так:

#toc { width:200px; position:fixed; float:left; position:fixed;
    top:0px; background:transparent url(bkg.png) right; height:100%;}
#toc a { display:block; position:absolute; width:190px; text-align:right;
    background:transparent url(chapter_bullet.png) no-repeat right;
    color:#0094FF;  padding-right:10px;}
#toc a[title=H1] { font-size:18px;}
#toc a[title=H2] { font-size:14px;}
#toc a[title=H3] { font-size:10px;}

Заключение

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

Код демонстрационных страниц в архиве (с используемыми изображениями).