Шаг 86.
Библиотека jQuery.
Манипулирование деревом DOM. Программный код

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

    Теперь можно подключить к работе библиотеку 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">, чтобы убедиться, что наш программный код может обрабатывать несколько таких элементов на странице.

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




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