На этом шаге мы рассмотрим способы вывода дат и кратких описаний новостей.

    Помимо заголовков нам требуется отобразить некоторую сопроводительную информацию о каждой статье. Мы будем извлекать дату публикации и краткое описание и отображать их.

$(document).ready(function() {
  $('#news-feed').each(function() {
    var $container = $(this);
    $container.empty();
    $.get('feed.xml', function(data) {
      $('rss item', data).each(function() {
        // Здесь выполняются действия с элементами новостей.
        var $link = $('<a></a>')
          .attr('href', $('link', this).text())
          .text($('title', this).text());
        var $headline = $('<h4></h4>').append($link);

        var pubDate = new Date($('pubDate', this).text());
        var pubMonth = pubDate.getMonth() + 1;
        var pubDay = pubDate.getDate(); 
        var pubYear = pubDate.getFullYear();
        var $publication = $('<div></div>')
          .addClass('publication-date')
          .text(pubMonth + '/' + pubDay + '/' + pubYear);
    
        var $summary = $('<div></div>')
          .addClass('summary')
          .html($('description', this).text());
        
        $('<div></div>')
          .append($headline, $publication, $summary)
          .appendTo($container);
      });
    }); 
  });
});

    Даты в рассылке RSS представлены в формате RFC 822 и включают информацию о дате, времени и часовом поясе (например, Sun, 28 Sep 2008 18:01:55 +0000). Этот формат не очень удобно воспринимать на глаз, поэтому для воспроизведения дат в более компактном виде (например, 9/28/2008) мы использовали объект Date, встроенный в JavaScript.

    Краткое описание легко извлекается и форматируется. Тем не менее следует отметить, что в рассылке в тексте описания могут присутствовать некоторые объекты HTML. Чтобы избежать их автоматического экранирования библиотекой jQuery, для вставки описания в страницу необходимо использовать метод .html(), а не .text().

    После того как эти новые элементы будут созданы, мы вставляем их в документ с помощью метода .append(). Обратите внимание, что здесь используется новая для нас особенность данного метода: когда метод получает несколько аргументов, он добавляет всех их последовательно.

Рис.1. Вид контейнера с заголовками новостей, датами публикации и краткими описаниями

    Как видно на рисунке 1, теперь для каждой новости выводятся заголовок, дата публикации и краткое описание. Все, что осталось сделать, это добавить класс headline с помощью вызова метода .addClass('headline') (что приведет к сокрытию новостей вследствие имеющегося определения класса CSS), после чего мы будем готовы приступить к воспроизведению анимационного эффекта.

Рис.2. Задан класс headline

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

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