Комментировать здесь особо нечего. Мы получаем все списки, вложенные во 'внешний' список navbar, и скрываем их.
На очереди — функция cleanupSamples (листинг 17.2). Она удалит обработчики событий, привязанные к первым потомкам контейнеров с текстом примеров (тех, к которым привязан стилевой класс sample).
Листинг 17.2
function cleanupSamples() {
var ceSamples = Ext.select('.sample');
ceSamples.each(function(el, cl, ind){ var elH6 = el.child(':first'); elH6.removeAllListeners();
});
}
Получаем все элементы Web-страницы с привязанным стилевым классом sample, для каждого получаем первый потомок и убираем все привязанные к нему ранее обработчики событий.
Осталось только внести исправления в код тела функции, которая передается методу onReady объекта Ext. Прежде всего, найдем выражение, привязывающее обработчик события click к пунктам всех списков в полосе навигации. Исправим его так, чтобы оно выглядело следующим образом:
ceLinks.on('click', function(e, t){ loadFragment(Ext.get(this), e) });
Тело нового обработчика этого события представляет собой вызов объявленной нами ранее функции loadFragment. В качестве параметров мы передаем ей экземпляр объекта Element, представляющий пункт полосы навигации, на котором щелкнули мышью, и полученный из экземпляра объекта HTMLElement, доступный из переменной this, а также экземпляр объекта EventObject, хранящий сведения о событии и переданный функции-обработчику первым параметром.
А в конце тела функции, которая передается методу onReady объекта Ext, вставим два выражения:
hideInnerLists();
loadFragment(Ext.get('navbar'). child('> LI: first'));
Первое вызывает функцию hideInnerLists, которую мы объявили ранее. Эта функция скроет все вложенные списки в полосе навигации после загрузки базовой Web- страницы index.htm.
Второе выражение вызовет функцию loadFragment и передаст ей в качестве параметра первый пункт 'внешнего' списка navbar полосы навигации ('HTML'). В результате изначально в контейнер cmain будет загружено описание языка HTML (содержимое файла html.htm, хранящегося в папке chapters).
Сохраним файл main.js. И проверим наш второй Web-сайт в действии. Как мы помним, для этого понадобится Web-сервер, который у нас уже есть — Microsoft Internet Information Services. (Мы установили его еще в
С помощью любой программы управления файлами (того же Проводника) откроем корневую папку созданного при установке этого Web-сервера тестового Web-сайта (папка c: Inetpubwwwroot). Очистим корневую папку от имеющихся там файлов и скопируем в нее все содержимое папки Site 2 (если кто забыл — в ней мы храним все файлы нового Web-сайта).
Описанную операцию мы будем выполнять всякий раз после любой правки файлов Web-сайта. Автор больше не будет об этом напоминать.
Впрочем, есть способ избежать подобной операции: поместить рабочие файлы Web-сайта в корневую папку Web-сервера и работать с ними прямо там.
Откроем новый Web-сайт в Web-обозревателе, для чего запустим его и наберем в поле ввода интернет-адреса http://localhost. Этот интернет-адрес, как мы помним из
Когда главная Web-страница нового Web-сайта откроется, проверим, присутствует ли в контейнере cmain изначально описание языка HTML и открыт ли первый вложенный список (находящийся в пункте 'HTML' полосы навигации). Пощелкаем на пунктах полосы навигации и посмотрим, как меняется содержимое контейнера cmain. И отметим, насколько быстро оно меняется. Вот что значит современные технологии!
Что дальше?
В этой главе мы создали новый Web-сайт, в котором реализовали самую современную на данный момент технологию — подгружаемое содержимое. Теперь нам есть чем похвастаться перед коллегами!
В следующей главе мы совладаем со второй технологией — 'последним писком' Web-моды — генерируемым содержимым. Мы будем создавать полосу навигации нашего Web-сайта программно, в Web- сценарии, на основе сведений, хранящихся в базе данных. Ну и попутно узнаем, что такое база данных.
ГЛАВА 18. Генерируемое содержимое
В предыдущей главе мы познакомились с одной из самых передовых интернет-технологий, применяемых в Web-дизайне, — подгружаемым содержимым. И, как оказалось, подгружать только часть содержимого Web-страницы значительно выгоднее, чем загружать Web-страницу целиком, — сокращается объем информации, пересылаемой по сети, а значит, уменьшается время ее загрузки. В этой главе мы узнаем еще об одной интернет-технологии, постепенно завоевывающей популярность, — генерируемом содержимом. Мы научимся создавать часть содержимого Web-страницы программно, с помощью Web- сценариев, на основе информации, хранящейся в базе данных. А также узнаем, что такое база данных и как ее создать средствами JavaScript.
Введение в генерируемое содержимое. Базы данных
Генерируемое содержимое Web-страницы, как следует из определения, — это фрагменты ее содержимого, которые не описываются в HTML-коде, а создаются программно, особым Web-сценарием. Содержимое может генерироваться как при открытии Web-страницы, так и в процессе ее просмотра, в ответ на действия посетителя.
Какие фрагменты содержимого Web-страницы можно генерировать программно? Да какие угодно! Программно можно создавать, скажем, текст сведений об авторских правах, добавив соответствующий код в файл Web-сценариев, выполняемый при загрузке каждой Web-страницы Web-сайта (у нас это файл main.js). Можно создавать гиперссылки, указывающие на Web-страницы с какими-либо дополнительными пояснениями или связанными сведениями (раздел 'См. также'). Можно создавать оглавления, списки использованных при написании статьи материалов, предметные указатели. Да и вообще всю Web-страницу можно создать программно (но это, конечно, совсем уж экстремальный случай).
У генерируемого содержимого есть два неоспоримых достоинства.
Достоинство первое — сокращение размера HTML-кода Web-страниц. В самом деле, если какая-то часть содержимого Web-страницы создается программно, значит, нет нужды 'забивать' этот фрагмент в
