Шаг 195.
Библиотека jQuery.
Прокрутка и перемещение. Прокрутка заголовков. Подготовка страницы

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

    Как обычно, начнем с фрагмента HTML. Мы поместим ленту новостей во врезку:

      <h3>Последние новости</h3>
      <div id="news-feed">
        <a href="news/index.html">Пресс-релизы</a>
      </div>

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


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

    Это результат нашего следования принципу постепенной деградации на случай, если поддержка JavaScript окажется отключенной у пользователя. Содержимое страницы останется работоспособным, но будет ссылаться на фактический источник рассылки RSS.

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

#news-feed {
  position: relative;
  height: 200px;
  width: 17em;
  overflow: hidden;
}

.headline {
  position: absolute;
  height: 200px;
  top: 210px;
  overflow: hidden;
}

    Обратите внимание, что высота и отдельного элемента новостей (представленного классом headline), и его контейнера равна 200рх. Кроме того, так как элементы новостей имеют абсолютное позиционирование относительно #news-feed, мы сможем поместить верхний край элемента на уровне нижнего края контейнера. А благодаря тому, что мы установили свойство overflow для #news-feed в значение hidden, изначально новости невидимы.

    Установка свойства position в классе headline в значение absolute обусловлена и другой причиной: для получения возможности перемещать какой-либо элемент страницы необходимо, чтобы класс CSS для этого элемента имел значение absolute или relative в свойстве position, а не значение по умолчанию static.

    Теперь, когда у нас имеются разметка HTML и таблица стилей CSS, можно попробовать вставить элементы новостей из рассылки RSS. Для начала обернем программный код методом .each(), который будет действовать как своеобразная условная инструкция if и содержать программный код в частном пространстве имен:

$(document).ready(function() {
   $('#news-feed').each(function() {
     var $container = $(this);
     $container.empty();
   });
});

    Обычно метод .each() используется для выполнения итераций по возможно большому набору элементов. Однако здесь наш селектор #news-feed отбирает элементы по значению атрибута id, поэтому могут существовать только два результата работы этого селектора. Фабричная функция может создать объект jQuery, соответствующий единственному уникальному элементу со значением news-feed в атрибуте id, или создать пустой объект jQuery, не обнаружив в странице элементов с указанным значением атрибута id. Метод each() обеспечивает выполнение содержащегося в нем программного кода, если и только если объект jQuery не является пустым.

    В самом начале цикла .each() производится очистка контейнера ленты новостей с целью подготовки его к наполнению новым содержимым, как показано на рисунке 2.

Рис.2. Вид контейнера после очистки

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

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




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