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