e. stopEvent();
window.location.href = href;
}
});
В листинге 16.5 мы привязываем к событию click всех пунктов всех списков, формирующих полосу навигации, функцию-обработчик, которую там же и объявляем.
Рассмотрим тело этой функции построчно.
Сначала получаем из переменной this экземпляр объекта HTMLElement, представляющий элемент Web-страницы, в котором обрабатывается событие, преобразуем его в экземпляр объекта Element и сразу же получаем его потомок, созданный тегом <A>:
var elA = Ext.get(this). child('A');
Фактически мы получаем пункт списка, на который щелкнули мышью, и добираемся до находящейся в нем гиперссылки.
Поскольку у нас пока еще не все пункты списков имеют гиперссылки, обязательно проверяем, существует ли вообще эта гиперссылка:
if (elA) {
Если она существует, метод child в предыдущем выражении вернет ссылку на экземпляр объекта Element, которое языком JavaScript будет преобразовано в логическое значение true. Условие будет выполнено, следовательно, выполнится блок 'то' условного выражения.
Если же такой гиперссылки нет, метод child вернет значение null. JavaScript преобразует его в значение false, условие не будет выполнено, и код блока 'то' условного выражения будет пропущен.
Первое выражение блока 'то' извлекает значение атрибута HREF тега <A> — интернет-адрес гиперссылки:
var href = elA.getAttribute('HREF');
Останавливаем всплытие события и отменяем его действие по умолчанию:
e. stopEvent();
И вот почему…
Мы выполняем программный переход на другую Web-страницу, так что 'услуги' гиперссылки нам в этом случае не нужны. Поэтому мы отменяем действие по умолчанию события click для гиперссылки — переход на целевую Web-страницу.
Событие click, возникнув в пункте вложенного списка, продолжит всплытие, пока не окажется в пункте 'внешнего' списка, к которому тоже привязан обработчик этого события. Этот обработчик также выполнится и произведет переход на Web-страницу, на которую указывает гиперссылка уже пункта 'внешнего' списка, что нам совсем не нужно. Поэтому мы останавливаем дальнейшее всплытие события.
Далее выполняем переход на полученный интернет-адрес:
window.location.href = href;
}
На этом блок 'то' условного выражения закончен.
Вот и все. Теперь посетители нашего Web-сайта, чтобы перейти на другую Web- страницу, могут щелкать на любом месте пункта полосы навигации, не обязательно точно на находящейся в нем гиперссылке.
Что ж, настало время создать остальные Web-страницы нашего Web-сайта. Точнее, переделать их под новый дизайн.
Откроем папку tags, где хранятся файлы Web-страниц, описывающих различные теги HTML. Переименуем их все, добавив расширение bak. После этого откроем в Блокноте Web-страницу index.htm.
Дальнейшие действия рассмотрим на примере Web-страницы t_audio.htm, описывающей тег <AUDIO>.
1. Копируем открытую Web-страницу index.htm под именем t_audio.htm в папку tags.
2. Открываем старую Web-страницу, которая сейчас хранится в файле t_audio.htm.bak.
3. Копируем HTML-код из секции тела Web-страницы t_audio.htm.bak в контейнер cmain только что созданной Web-страницы t_audio.htm. Код, формирующий гиперссылку на Web-страницу index.htm, можно опустить — эта гиперссылка нам больше не нужна.
4. Исправляем в коде Web-страницы t_audio.htm интернет-адреса, указывающие на файлы других Web-страниц, таблицы стилей и Web-сценария. Здесь все просто:
смотрим, в какой папке хранится целевой файл, и указываем в интернет-адресе относительный путь к нему.
Вот теги <LINK> и <SCRIPT>, указывающие на внешнюю таблицу стилей и файлы
Web-сценариев:
<LINK REL='stylesheet' HREF='../main.css' TYPE='text/css'>
<SCRIPT SRC='../ext-core.js'></SCRIPT>
<SCRIPT SRC='../main.js'></SCRIPT>
А вот HTML-код, формирующий гиперссылки на Web-страницы index.htm и t_img.htm:
<LI><A HREF='../index.htm'>HTML</A>
<LI><CODE><A HREF='t_img.htm'>IMG</A></CODE></LI>
Интернет-адреса остальных гиперссылок формируются аналогично.
5. Сохраняем готовую Web-страницу t_audio.htm.
Остается проделать все это с остальными Web-страницами, описывающими теги, что мы к этому времени создали.
Создадим также Web-страницы с описанием технологии CSS, примеров и сведениями о разработчиках. Они будут храниться в файлах css_index.htm, samples_index.htm и about.htm.
Во втором и третьем пункте 'внешнего' списка, формирующего полосу навигации, создадим вложенные списки по аналогии с тем, что мы уже создали в первом его пункте. Пусть они будут содержать по два-три пункта, потом мы добавим остальные.
Также создадим хотя бы по одной Web-странице, описывающей какой-нибудь атрибут стиля CSS и пример. Сформируем гиперссылки на эти Web-страницы на основе соответствующих пунктов только что созданных вложенных списков.
Конечно, наш Web-сайт все еще неполон, но для его отладки созданных Web- страниц вполне хватит. Потом, закончив с программированием, мы доделаем его до конца.
Скрытие и открытие вложенных списков
Вложенные списки в полосе навигации чрезвычайно громоздки. Как бы сделать так, чтобы все они были скрыты и появлялись только при щелчке на пункте 'внешнего' списка, в который они вложены?
Легко!
— Изначально все вложенные списки у нас будут скрыты.
— При открытии Web-страницы, содержащей один из разделов Web-сайта ('HTML', 'CSS' или 'Примеры'), будет открываться тот вложенный список, что вложен в соответствующий пункт 'внешнего' списка.
— При открытии Web-страницы, описывающей тег, атрибут стиля или пример, будет открываться вложенный список, содержащий указывающий на эту Web- страницу пункт.
— В данный момент может быть открыт только один вложенный список — остальные будут скрыты.
— Для скрытия и раскрытия вложенного списка мы будем менять у него значение атрибута стиля display (см.
