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

Теперь можно подключить к работе библиотеку jQuery. Начнем с селектора, который отберет все элементы , и присоединим к нему метод .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, все готово к созданию врезки. Сейчас можно создать копию каждого элемента , добавить к ней класс 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. Вид параграфа с врезкой

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

Для начала неплохо, но во врезках, как правило, не сохраняется форматирование текста, как это получилось с фрагментом бедным. Нам необходимо из текста, включенного в элемент , удалить , , <a href> и другие линейные теги. Кроме того, было бы неплохо иметь возможность немного изменять текст врезки: отбрасывать некоторые слова и замещать их многоточием. Для этого в текстовом примере мы обернули несколько слов тегом : , царствующему.

Сначала мы заменим выделенные слова многоточием, а потом заместим разметку 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);
  });
});

На этот раз процесс копирования начинается с сохранения копии в переменной. Переменная необходима просто из-за отсутствия возможности выполнить все необходимые операции в одной цепочке. Обратите также внимание, что после того, как мы отыскали элемент  и заменили его разметку HTML многоточием (…), мы используем метод .end(), чтобы отклонить результаты последнего запроса, .find('span.drop'). Благодаря этому мы получаем возможность вставить в начало параграфа всю копию целиком, а не только многоточие.

В конце мы создаем еще одну переменную, clonedText, куда записываем простое текстовое содержимое копии, и этим текстовым содержимым заменяем разметку HTML копии. Теперь врезка выглядит, как показано на рисунке 2.

Рис.2. Вид врезки, в которой часть текста заменена многоточием

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

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

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

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