Шаг 87.
Библиотека jQuery.
Манипулирование деревом DOM. Украшение врезок

    На этом шаге мы приведем изменения приложения для украшения врезок.

    Теперь врезки работают, как и следовало ожидать, дочерние элементы разметки удаляются, а вместо отбрасываемого текста добавляются многоточия.

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

    Для преодоления этого ограничения мы можем завернуть каждую врезку в другой элемент <div>:

$(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)
      .wrap('<div class="pulled-wrapper"></div>');

    var clonedText = $clonedCopy.text();
    $clonedCopy.html(clonedText);
  });
});

    Кроме того, мы должны изменить таблицы стилей CSS, чтобы обеспечить оформление нового элемента <div> и добавить два фоновых изображения:

.pulled-wrapper {
  background: url(pq-top.jpg) no-repeat left top;
  position: absolute;
  width: 160px;
  right: -180px;
  padding-top: 18px;
}
.pulled {
  background: url(pq-bottom.jpg) no-repeat left bottom;  
  position: relative;
  display: block;
  width: 140px;
  padding: 0 10px 24px 10px;
  font: italic 1.3em "Times New Roman", Times, serif;
}

    Здесь некоторые правила, которые ранее применялись к элементам <span class="pulled">, теперь применяются к элементам <div class="pulled-wrapper">. Изменения в свойствах width и padding учитывают использование фоновых изображений для оформления границ, а в классе .pulled изменены значения свойств position и display, чтобы обеспечить корректное отображение во всех браузерах.

    В итоге приукрашенные врезки выглядят так, как показано на рисунке 1.

Рис.1. Окончательный вид врезок

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

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




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