} else {
Далее все нам уже знакомо:
if ((elLastItem) && (elLastItem.dom!= elLI.dom))
elLastItem.removeClass("selected");
elLI.addClass("selected");
elLastItem = elLI;
}
}
Проверяем, выделен ли в данный момент какой-либо пункт полосы навигации, и не тот ли это пункт, на котором щелкнули мышью. Если это так, снимаем с него выделение, убрав стилевой класс selected из привязки к нему. Далее выделяем пункт, на
котором щелкнули мышью, привязав к нему стилевой класс selected, и сохраняем этот пункт в переменной elLastItem. На этом выполнение функции loadFragment закончено.
Теперь объявим функцию hideInnerLists, которая скроет все вложенные списки в полосе навигации после загрузки базовой Web-страницы index.htm. Вот соответствующий код:
function hideInnerLists() {
var ceInnerLists = Ext.get("navbar"). select("UL");
ceInnerLists.setDisplayed(false);
}
Комментировать здесь особо нечего. Мы получаем все списки, вложенные во "внешний" список 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. (Мы установили его еще в главе 1.)
С помощью любой программы управления файлами (того же Проводника) откроем корневую папку созданного при установке этого Web-сервера тестового Web-сайта (папка c: \Inetpub\wwwroot). Очистим корневую папку от имеющихся там файлов и скопируем в нее все содержимое папки Site 2 (если кто забыл — в ней мы храним все файлы нового Web-сайта).
ВНИМАНИЕ!
Описанную операцию мы будем выполнять всякий раз после любой правки файлов Web-сайта. Автор больше не будет об этом напоминать.
НА ЗАМЕТКУ
Впрочем, есть способ избежать подобной операции: поместить рабочие файлы Web-сайта в корневую папку Web-сервера и работать с ними прямо там.
Откроем новый Web-сайт в Web-обозревателе, для чего запустим его и наберем в поле ввода интернет-адреса http://localhost. Этот интернет-адрес, как мы помним из главы 1, идентифицирует наш собственный компьютер — локальный хост.
Когда главная 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-страницы создается программно, значит, нет нужды "забивать" этот фрагмент в HTML-код. Код станет компактнее, файл загрузится по сети быстрее, и посетитель будет доволен.
Достоинство второе — унификация данных. Здесь придется начать издалека…
Создать программно текст сведений об авторских правах легко — нужно только найти подходящий метод библиотеки Ext Core, написать вызывающее его выражение и передать данному методу строку, содержащую нужный текст или HTML-код, создающий требуемый текст. Соответствующий Web-сценарий займет всего несколько строк.
Совсем другое дело — создание, скажем, списка материалов, использованных при написании статьи. Помимо самого Web-сценария, выполняющего генерацию этого списка, нам нужны данные, на основе которых он будет создаваться: названия источников, авторы, год выхода и пр. Откуда их взять?
Подготовить самим, разумеется. Никто,
