Если вы используете цитаты из разных источников, будь то: сайт, книга или человек — то неплохо было бы указать источник этой информации в сноске.
Если выносить и оформлять сноски вручную, то это надоест даже самому настойчивому «писателю». Так что предлагаю Вам способ реализации сносок при помощи jQuery.
Текст сноски будет браться из атрибутов(параметров) тега цитаты. Сами же цитаты будут выглядеть так:
<q title="Done with your TPS reports?"> Is this good for the company? </q>Цитата с указанием ссылки.
<q title="Done with your TPS reports?"> Is this good for the company? </q>Цитата с замечанием
<q title="Zeldman. <em>Designing withnWeb Standards</em> New Riders, 2003."> We build only to rebuild. </q>Цитата с вложенным тегом.
Те же конструкции есть и для тега
blockquote. Различие тегов q и blockquote, в том, что первый строковый элемент, а другой блочный.Теперь приступим к прикручиванию jQuery:
Вот так выглядит наш код полностью:
$(document).ready(function() {
$("#wrap").append("<ol id=\"footnotes\"></ol>");
footnote = 1;
$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
$(".footnote").each(function() {
$(this).append("<sup>"+footnote+"</sup>");
cite="<li>";
url=$(this).attr("cite");
title=$(this).attr("title");
if(title && url) {
cite+="<a href=\""+url+"\">"+title+"</a>";
} else if(title) {
cite+=title;
} else if(url) {
cite+="<a href=\""+url+"\">"+url+"</a>";
}
cite+="</li>";
$("#footnotes").append(cite);
footnote++; });
});
Обновление: На скорую руку, по заявкам комментаторов моего блога сделал версию с якорями.
$(document).ready(function() {
$("#wrap").append("<ol id=\"footnotes\"></ol>");
footnote = 1;
$("q[cite],q[title],blockquote[cite],blockquote[title]").addClass("footnote");
$(".footnote").each(function() {
$(this).append("<sup id=\"sn"+footnote+"\"><a href=\"#sl"+footnote+"\">"+footnote+"</a></sup>");
cite="<li id=\"sl"+footnote+"\">";
url=$(this).attr("cite");
title=$(this).attr("title");
if(title && url) {
cite+="<a href=\""+url+"\">"+title+"</a> <a href=\"#sn"+footnote+"\">К цитате</a>";
} else if(title) {
cite+=title;
} else if(url) {
cite+="<a href=\""+url+"\">"+url+"</a> <a href=\"#sn"+footnote+"\">К цитате</a>";
}
cite+="</li>";
$("#footnotes").append(cite);
footnote++;
});
});Этот скрипт добавляет после основного блока с контентом(
#wrap), блок со сносками(#footnotes), а затем добавляет внутрь него сами сноски.Посмотреть пример использования скрипта, а так же перейти на сайт автора этого замечательного скрипта вы можете ниже. Всем спасибо! ;-)
Посмотреть пример.
Сайт автора скрипта (Английский)
Подписаться на заметки от Чернева(RSS)
