На этом шаге мы рассмотрим реализацию программного кода, создающего врезку.
Теперь можно подключить к работе библиотеку jQuery. Начнем с селектора, который отберет все элементы <span class="pull-quote">, и присоединим к нему метод .each(), чтобы иметь возможность выполнять несколько операций в процессе обхода элементов:
$(document).ready(function() {
$('span.pull-quote').each(function(index) {
// . . . .
});
});
Затем для каждой врезки найдем родительский параграф и присвоим ему новое значение свойства CSS position:
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); }); });
Здесь, чтобы повысить производительность и удобочитаемость, мы сно ва сохраняем полученный набор элементов в переменной. Теперь, когда установлены значения необходимых свойств CSS, все готово к созданию врезки. Сейчас можно создать копию каждого элемента <span>, добавить к ней класс pulled и вставить ее в начало параграфа:
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); $(this).clone() .addClass('pulled') .prependTo($parentParagraph); }); });
Так как врезка имеет абсолютное позиционирование, тот факт, что она находится внутри параграфа, не имеет большого значения. Пока врезка находится внутри параграфа, она будет позиционироваться относительно верхней и правой границы этого параграфа в соответствии с правилами CSS. Однако, если бы мы применили к свойству position врезки значение float, ее нахождение внутри параграфа сказалось бы на его расположении по вертикали.
Теперь параграф вместе с врезкой выглядит так, как показано на рисунке 1.
Рис.1. Вид параграфа с врезкой
Полный текст этого примера можно взять здесь.Для начала неплохо, но во врезках, как правило, не сохраняется форматирование текста, как это получилось с фрагментом бедным. Нам необходимо из текста, включенного в элемент <span class="pull-quote">, удалить <strong>, <em>, <a href> и другие линейные теги. Кроме того, было бы неплохо иметь возможность немного изменять текст врезки: отбрасывать некоторые слова и замещать их многоточием. Для этого в текстовом примере мы обернули несколько слов тегом <span>: <span class="drop">, царствующему</span>.
Сначала мы заменим выделенные слова многоточием, а потом заместим разметку HTML врезки простым текстом:
$(document).ready(function() { $('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $clonedCopy = $(this).clone(); $clonedCopy .addClass('pulled') .find('span.drop') .html('…') .end() .prependTo($parentParagraph) var clonedText = $clonedCopy.text(); $clonedCopy.html(clonedText); }); });
На этот раз процесс копирования начинается с сохранения копии в переменной. Переменная необходима просто из-за отсутствия возможности выполнить все необходимые операции в одной цепочке. Обратите также внимание, что после того, как мы отыскали элемент <span class="drop"> и заменили его разметку HTML многоточием (…), мы используем метод .end(), чтобы отклонить результаты последнего запроса, .find('span.drop'). Благодаря этому мы получаем возможность вставить в начало параграфа всю копию целиком, а не только многоточие.
В конце мы создаем еще одну переменную, clonedText, куда записываем простое текстовое содержимое копии, и этим текстовым содержимым заменяем разметку HTML копии. Теперь врезка выглядит, как показано на рисунке 2.
Рис.2. Вид врезки, в которой часть текста заменена многоточием
Полный текст этого примера можно взять здесь.Как видите, в один из последующих параграфов был добавлен еще один элемент <span class="pull-quote">, чтобы убедиться, что наш программный код может обрабатывать несколько таких элементов на странице.
На следующем шаге мы рассмотрим украшение врезок.