На этом шаге мы рассмотрим разместим каждую сноску с новой строки.
Одно из решений этой проблемы состоит в изменении свойств CSS таким образом, чтобы элементы <span> отображались как блочные элементы, но только те из них, которые находятся внутри элемента <div class="chapter">:
span.footnote {
font-style: italic;
font-family: "Times New Roman", Times, serif;
display: block;
margin: 1em 0;
}
.chapter span.footnote {
display: inline;
}
Рис.1. Теперь сноски отделены друг от друга
Полный текст этого примера можно взять здесь.Теперь сноски начинают обретать форму, как показано на рисунке 1.
Сейчас сноски, по крайней мере, отделены друг от друга, и все же с ними еще много чего можно сделать. Более надежное решение должно:
- Отмечать место в тексте, откуда была изъята каждая сноска.
- Пронумеровать все местоположения и присвоить каждой сноске соответствующий номер.
- Создать в тексте ссылку на соответствующую сноску, а в сноске - ссылку на местоположение в тексте.
Все это можно реализовать внутри метода .each(), но сначала подготовим контейнерный элемент внизу страницы, куда будут помещаться сноски:
$(document).ready(function() {
$('<ol id="notes"></ol>').insertAfter('div.chapter');
});
Использование упорядоченного списка <ol id="notes"></ol> для сносок выглядит вполне разумным решением - в конце концов, нам необходимо пронумеровать их, так почему бы не использовать элемент, который пронумерует их автоматически? Мы присвоили списку идентификатор notes и вставили его после элемента <div class="chapter">.
На следующем шаге мы продолжим работу с примером, начало которого мы рассмотрели в конце этого шага.
