Шаг 76.
Библиотека jQuery.
Манипулирование деревом DOM. Перемещение элементов

    На этом шаге мы рассмотрим оформление сносок, которые мы потом в дальнейшем перенесем в конец документа.

    В примере со ссылками На начало мы создали новые элементы и добавили их в страницу. Имеется также возможность извлекать элементы из одного места в странице и вставлять в другое место. Такого рода операция применяется, скажем, в приложении, допускающем динамическое размещение содержимого и оформление сносок. В тексте романа Дубровский, используемом для нашего примера, мы оформили как сноски еще пару фрагментов текста:

<div class="chapter">
<p class="square">
Несколько  лет  тому  назад  в  одном  из своих  поместий жил старинный
русской барин, 
<a href="http://ru.wikipedia.org/wiki/%D0%94%D1%83%D0%B1%D1%80%D0%BE%D0
%B2%D1%81%D0%BA%D0%B8%D0%B9_(%D1%80%D0%BE%D0%BC%D0%B0%D0%BD)">
Кирила Петрович Троекуров</a>. Его богатство, знатный род и связи
давали ему большой вес в губерниях, где  находилось его имение.  Соседи рады
были угождать малейшим его прихотям; губернские чиновники трепетали  при его
имени;  Кирила  Петрович принимал знаки  подобострастия как надлежащую дань;
дом его  всегда был полон  гостями, готовыми тешить  его барскую праздность,
разделяя  шумные,  а  иногда  и  буйные  его  увеселения.  Никто  не  дерзал
отказываться от его приглашения, или в известные  дни не являться  с должным
почтением в село  Покровское. В домашнем  быту Кирила Петрович выказывал все
пороки человека необразованного. Избалованный всем, что только окружало его,
он привык давать полную волю всем порывам пылкого своего нрава и всем затеям
довольно ограниченного  ума.  Не смотря на  необыкновенную  силу  физических
способностей, он раза два в неделю страдал от обжорства и каждый вечер бывал
навеселе.  <span class="footnote">В  одном  из флигелей  его  дома  жили  16  
горничных,  занимаясь
рукоделиями,  свойственными  их   полу.  Окны  во  флигеле  были  загорожены
деревянною решеткою;  двери  запирались замками, от  коих  ключи хранились у
Кирила  Петровича.</span>  Молодые затворницы,  в положеные часы,  
сходили в  сад и
прогуливались  под  надзором двух  старух.  От  времени  до  времени  Кирила
Петрович выдавал некоторых из них за  муж и новые поступали  на  их место. С
крестьянами и дворовыми обходился он строго и  своенравно; не  смотря на то,
они были ему преданы: они тщеславились богатством  и славою своего господина
и в свою очередь позволяли себе многое в отношении к их соседам,  надеясь на
его сильное покровительство.</p>
<p class="nobility hexagon">
Всегдашние занятия Троекурова состояли  в разъездах  около  пространных
его  владений,  одолжительных  пирах, и  в 
<a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%B5
%D0%B4%D0%B2%D0%B5%D0%B6%D1%8C%D1%8F_%D0%BF%D0%BE%D1%82%D0%B5%D1%85%D0
%B0">
проказах</a>,  ежедневно при  том
изобретаемых и  жертвою  коих бывал обыкновенно какой-нибудь новый знакомец;
хотя и старинные приятели не всегда их избегали за исключением одного Андрея
Гавриловича Дубровского. Сей Дубровский, отставной поручик  гвардии, был ему
ближайшим  соседом  и  владел семидесятью  душами.  Троекуров,  надменный  в
сношениях с  людьми самого высшего  звания, уважал Дубровского, не смотря на
его смиренное  состояние. Некогда были они товарищами  по службе и Троекуров
знал по опыту нетерпеливость  и решительность его характера.  Обстоятельства
разлучил  и их надолго. Дубровский  с расстроенным  состоянием принужден был
выдти  в отставку  и поселиться в остальной своей деревне.  Кирила Петрович,
узнав о том, предлагал  ему свое  покровительство, но Дубровский  благодарил
его и остался беден и независим. Спустя  несколько  лет Троекуров, отставной
генерал-аншеф,  приехал в свое поместие,  они свидились  и обрадовались друг
другу. С тех пор они каждый день бывали вместе, и Кирила Петрович, отроду не
удостоивавший никого  своим посещением, заезжал  запросто в  домишка  своего
старого   товарища.   Будучи  ровесниками,  рожденные  в   одном   сословии,
воспитанные  одинаково,  они  сходствовали  отчасти   и  в  характерах  и  в
наклонностях.  <span class="footnote">В  некоторых  отношениях  и 
судьба  их  была  одинакова:  оба женились по любви, оба скоро овдовели, у 
обоих оставалось по ребенку.</span>  - Сын
Дубровского  воспитывался в Петербурге, дочь Кирила Петровича росла в глазах
родителя, и  Троекуров часто говаривал  Дубровскому: "Слушай,  брат,  Андрей
Гаврилович: коли в твоем Володьке будет путь,  так отдам за него Машу; даром
что  он  гол  как  сокол".  Андрей  Гаврилович  качал   головой   и  отвечал
обыкновенно:  "Нет, Кирила Петрович: мой  Володька не жених Марии Кириловне.
Бедному дворянину, каков он,  лучше жениться на бедной  дворяночке,  да быть
главою в доме, чем сделаться приказчиком избалованной бабенки".</p>
<p>
Все завидовали  <span class="pull-quote">согласию,  царствующему  между 
надменным  Троекуровым и
бедным его соседом и <span class="drop">удивлялись</span> смелости сего 
последнего, когда он за столом
у  <strong>Кирила  Петровича</strong>  прямо высказывал  свое  
мнение</span>,  не  заботясь  о  том,
противуречило ли оно мнениям хозяина. Некоторые пытались было  ему подражать
и  выдти из пределов должного повиновения, но Кирила Петрович так их пугнул,
что навсегда отбил  у них  охоту к  таковым 
<a href="http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BA%D1%83%D1%88%D0
%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B5%D1%81%D1%82%D1%83%D0
%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5">
покушениям</a>,  и  Дубровский  один
остался вне общего закона. <span class="footnote">Нечаянный случай все 
расстроил и переменил.</span></p>
<!-- продолжение кода разметки   -->
  </div>
<!-- Здесь будут располагаться сноски -->
<div id="footer">
</div>
  </div>

    Каждый из этих трех параграфов имеет одну сноску, оформленную как элемент <span class="footnote"></span>. Используя такую разметку HTML, мы можем выделять содержимое сносок. Учитывая, что в соответствии с правилами в таблице стилей CSS текст сноски выводится курсивным шрифтом, три параграфа текста будут выглядеть, как показано на рисунке 1.

Рис.1. Сноски в параграфах

Полный текст этого примера можно взять здесь.

    На следующем шаге мы рассмотрим извлечение сносок.




Предыдущий шаг Содержание Следующий шаг