Еще в апреле Коллис Таид (Collis Ta’eed) — генеральный директор Envato — написал фантастическое руководство по разработке структуры вкладок с использованием CSS / HTML / JS.
Если вы этого еще не сделали, я на 100% рекомендую вам ознакомиться с ним. Однако динамическое добавление в RSS-канал выходит за рамки этой статьи. В сегодняшнем видеоуроке я покажу вам, как это сделать с помощью PHP. Примерно через сорок пять минут вы, возможно, захотите сделать быстрый «предварительный показ ванной». Вы также можете взять немного изюма.
Есть странная проблема с преобразованием этого видео во Flash. По крайней мере, в течение следующих нескольких часов вы можете посмотреть видео. Я скоро добавлю видео на этот сайт.
Наша цель
Мы будем создавать систему вкладок для трех уникальных RSS-каналов:
Мы хотим динамически импортировать эти каналы в наш документ. Нашим серверным сценарием сегодня будет PHP, и мы будем использовать jQuery для создания структуры вкладок.
* Примечание. Цель данного руководства — продемонстрировать работу, выполняемую в фоновом режиме. Как упоминалось ранее, Collis уже создал замечательный скин. Так же, как программирование выходило за рамки этого учебника, работа над «дизайном» будет выходить за рамки этой статьи. Чтобы держать вещи как можно более чистыми и «точными», мы будем использовать самую обнаженную форму структуры вкладок — говоря с точки зрения дизайна.
Конечный продукт Коллиса.
Наша голая кожа
Шаг 1: Создание структуры файла
Откройте ваш любимый редактор кода и создайте следующие папки / файлы. Файлы PHP могут быть пустыми.
- index.php
- default.css
- CSS
- default.css
- JS
- JQuery-1.2.6.pack.js
- myScript.js
- включает
- functions.php
Шаг 2: логика
Откройте файл «functions.php». Мы будем создавать только одну относительно простую функцию. Сначала скопируйте следующий код. После этого продолжайте чтение для анализа кода.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<?php
function getFeed($feed_url) {
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
echo «<ul>»;
foreach($x->channel->item as $entry) {
echo «<li><a href=’$entry->link’ title=’$entry->title’>» .
}
echo «</ul>»;
}
?>
|
Сначала мы создаем функцию getFeed (). Базовая структура любой функции PHP:
|
1
2
3
|
function someName($parameters) {
…some method
}
|
Затем мы создаем переменную с именем «$ content» и делаем ее равной результату: file_get_contents ($ feed_url).
«file_get_contents» является предпочтительным способом чтения содержимого файла в строку. «
Теперь, когда вы понимаете определение, нам нужно только передать наш файл. У нас есть два варианта. Во-первых, мы могли бы передать строку в наш RSS-канал — вот так:
|
1
|
file_get_contents(«http://feedproxy.google.com/nettuts»);
|
Полагаю, это бы сработало. Метод будет правильно читать RSS-канал и сохранять результаты в нашей переменной «$ content». Но у нас всегда должно быть слово «повторное использование», скрывающееся в наших умах при работе.
Представьте, что у нас есть много разных страниц в нашем веб-приложении, которые хотят вызвать эту функцию «getFeed ()». Но что, если они хотят получать разные каналы? Разве не было бы неплохо, если бы мы могли передать URL-адрес в функцию вместо его жесткого кодирования? Конечно, это будет! Следовательно, вместо того, чтобы вводить путь, мы просто будем использовать переменную с именем «$ feed_url».
|
1
|
file_get_contents($feed_url);
|
Чтобы использовать эту переменную из внешнего источника, нам нужно убедиться, что функция принимает один параметр.
|
1
2
3
|
function getFeed($feed_url){
}
|
Теперь, когда мы вызываем функцию, мы можем сделать это так:
|
1
|
<?php getFeed(«path to some RSS feed»);
|
Далее мы создадим новый экземпляр ($ x) SimpleXmlElement . В скобках мы передадим нашу переменную $ content.
|
1
|
$x = new SimpleXmlElement($content);
|
Наконец, нам нужно пройти через RSS-канал и извлечь необходимую нам информацию.
|
1
2
3
4
5
6
|
echo «<ul>»;
foreach($x->channel->item as $entry) {
echo «<li><a href=’$entry->link’ title=’$entry->title’>» .
}
echo «</ul>»;
|
Мы начнем с повторения открытого неупорядоченного тега списка. Затем мы циклически перебираем каждую запись в нашем RSS-канале, используя оператор «foreach». Это утверждение в основном гласит: «создайте переменную с именем $ entry, которая будет содержать значение каждого тега элемента в нашей ленте RSS.
Что удивительно в RSS-каналах, так это то, что все они имеют одинаковую базовую структуру Каждый канал содержит упаковочный тег «канал». Затем каждая публикация в вашем фиде будет заключена в тег «item». Вся информация, которая нам нужна, может быть доступна таким образом.
В нашем выражении «foreach» нам нужно только извлечь ссылку и заголовок и поместить его в тег «li». Тег «ссылка» содержит ссылку на фактическое размещение. Тег заголовка, очевидно, содержит заголовок сообщения. Это все, что нам нужно для этого конкретного проекта, но я бы посоветовал вам ознакомиться с другой доступной вам информацией. Просто просмотрите источник любого RSS-канала, чтобы проанализировать структуру.
Наша логика теперь завершена. Теперь нам нужно создать нашу страницу index.php и вызвать функцию.
Шаг 3: Страница Index.php
Вставьте следующий код на страницу index.php.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<title></title>
<link rel=»stylesheet» href=»css/default.css» />
<script src=»js/jquery-1.2.6.pack.js» type=»text/javascript»></script>
<script src=»js/myScript.js» type=»text/javascript»></script>
</head>
<body>
<?php require_once «includes/functions.php»;
<div id=»wrap»>
<ul id=»nav»>
<li><a href=»#content_1″ class=»selected»>NETTUTS</a></li>
<li><a href=»#content_2″>ThemeForest</a></li>
<li><a href=»#content_3″>Screencasts</a></li>
</ul>
<div id=»mainContent»>
<div id=»content_1″>
<?php getFeed(«http://feedproxy.google.com/nettuts»);
</div><!—end content 1—>
<div id=»content_2″>
<?php getFeed(«http://feedproxy.google.com/themeforest»);
</div><!—end content 2—>
<div id=»content_3″>
<?php getFeed(«http://feeds.feedburner.com/NETTUTSVideos»);
</div><!—end content 3—>
</div><!—end main content —>
</div><!—end wrap—>
</body>
</html>
|
Как я уже говорил ранее, я не хочу слишком углубляться в «дизайн». Коллис уже сделал это для вас. Обратитесь к этому руководству для вашего «исправления дизайна». Но для быстрого обзора мы храним наши навигационные ссылки в неупорядоченном списке с идентификатором «nav». В нашем разделе основного контента у нас есть три элемента с именами «content_1», «content_2» и «content_3» соответственно. Внутри каждого подразделения мы вызываем нашу функцию «getFeed» и передаем различные URL-адреса нашим RSS-каналам.
Добавьте немного базового CSS, и вы получите следующее:
Реализация вкладок с помощью jQuery
Откройте файл «myScripts.js» и вставьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
$(function() {
$(‘#mainContent div:not(:first)’).hide();
$(‘ul li a’).click(function() {
$(‘ul#nav li a’).removeClass(‘selected’);
$(this).addClass(‘selected’);
var href = $(this).attr(‘href’);
var split = href.split(‘#’);
$(‘#mainContent div’).hide();
$(‘#mainContent div#’ + split[1]).fadeIn();
return false;
});
});
|
Когда документ будет готов к манипулированию, мы возьмем все наши div содержимого — но не самый первый — и скроем их. Это удалит вторые два RSS-канала.
Затем, когда пользователь нажимает на одну из наших навигационных ссылок, мы запускаем функцию. Внутри этой функции мы удалим класс «selected» из всех наших тегов привязки навигации. Этот класс используется для предоставления некоторой визуальной обратной связи относительно того, какая вкладка выбрана в данный момент. В этом простом примере я просто выделил текст для этой конкретной вкладки. Теперь мы добавим этот класс специально к тегу привязки, по которому щелкнули — $ (this) .addClass (‘selected’);
Двигаясь дальше, мы создаем переменную с именем ‘href’ и делаем ее равной href тега привязки, по которому щелкнули. Если мы вернемся к нашему документу, эти навигационные теги ссылаются на разделы в основном контенте — «# content_1», «# content_2», «# content_3». Идея состоит в том, что, если у пользователя не включен Javascript, эти ссылки будут прокручивать пользователя непосредственно к нужному каналу.
Это дополнительно служит еще одним уникальным преимуществом. Обратите внимание: для тега навигации NETTUTS URL-адрес имеет значение » # content_1 «. Теперь в разделе основного контента в div с идентификатором » content_1 » размещается наш канал RSS NETTUTS. Итак … мы установили связь между ними! Надеюсь это имеет смысл; это немного сложно описать. Обратитесь к скринкасту, если я недостаточно хорошо проиллюстрировал этот момент.
Я собираюсь использовать «split» для удаления знака #. Split работает так же, как PHP-функция разнесения.
|
1
|
var split = href.split(‘#’);
|
Теперь массив split [1] будет равен content_1. Последний шаг заключается в том, чтобы найти основной контентный div с точным идентификатором и добавить его соответствующим образом.
|
1
|
$(‘#mainContent div#’ + split[1]).fadeIn();
|
Я надеюсь, что этот урок помог вам. Как только вы объедините дизайн из учебника Collis с логикой из этого, вы обнаружите фантастическое дополнение к своей боковой панели. Хотя этот шаг должен послужить первым шагом для начинающих. Я приветствую всех вас, чтобы усовершенствовать код, чтобы сделать его более продвинутым и защищенным от ошибок. Я не пошел в последнюю часть, чтобы сохранить что-то для второй части! :п
- Подпишитесь на RSS-канал NETTUTS, чтобы узнать о ежедневных новостях и статьях о веб-разработке.