HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Также привязываем обработчик к событию mouseout полученных пунктов:

ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");});

Он уберет стилевой класс hovered из привязки к данному пункту списка, и его рамка примет прежний цвет.

Переход на целевую Web-страницу при щелчке на пункте полосы навигации

На очереди — реализация перехода на целевую Web-страницу при щелчке на любом месте в пункте полосы навигации, не обязательно точно на гиперссылке.

Откроем таблицу стилей main.css и найдем в ней стили гиперссылок с селекторами вида #navbar A<псевдокласс>. Удалим их и вместо них напишем стиль, приведенный в листинге 16.4.

Листинг 16.4

#navbar A: focus,

#navbar A: hover,

#navbar A: active,

#navbar A: visited { color: #576C8C; text-decoration: none }

Он задает для гиперссылок в списке navbar независимо от их состояния одинаковый цвет текста и отсутствие подчеркивания. Негласный стандарт для гиперссылок полосы навигации требует, чтобы они всегда имели один и тот же вид.

Далее откроем файл Web-сценария main.js и вставим в функцию, которая передается методу onReady объекта Ext в качестве параметра, код листинга 16.5.

Листинг 16.5

ceLinks.on("click", function(e, t) { var elA = Ext.get(this). child("A"); if (elA) {

var href = elA.getAttribute("HREF");

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 (см. главу 9) с помощью методов объекта Element, управляющих видимостью элемента Web-страницы.

Откроем файл Web-сценария main.js и запишем где-либо в его начале, еще до вызова метода onReady объекта Ext, объявление функции, приведенное в листинге 16.6.

Листинг 16.6

function showInnerList(iIndex) {

var elNavbar = Ext.get("navbar");

var ceInnerLists = elNavbar.select("UL");

ceInnerLists.setDisplayed(false);

if (iIndex) {

var sSelector = "UL: nth(" + iIndex + ")";

elNavbar.child(sSelector). setDisplayed(true);

}

}

Данная функция с именем showInnerList будет скрывать все вложенные списки и открывать только тот из них, порядковый номер которого передан ей в качестве единственного параметра. Если параметр опущен, но никакой вложенный список открыт не будет.

Рассмотрим код этой функции построчно.

Сначала получаем "внешний" список, формирующий полосу навигации:

var elNavbar = Ext.get("navbar");

Затем получаем все вложенные в него списки:

var ceInnerLists = elNavbar.select("UL");

Далее скрываем все вложенные списки, для чего используем метод setDisplayed — так проще:

ceInnerLists.setDisplayed(false);

Проверяем, был ли функции showInnerList передан параметр:

if (iIndex) {

Если он был передан, переменная iIndex будет содержать число, которое преобразуется в значение true, и условие выполнится. В противном случае переменная iIndex получит значение null, которое будет преобразовано в false, и условие не выполнится.

Если параметр функции showInnerList был передан, выполняется следующий код. Формируем строку с селектором CSS, который будет выбирать вложенный список, чей порядковый номер был передан с параметром:

var sSelector = "UL: nth(" + iIndex + ")";

Выбираем вложенный список с заданным номером и открываем его:

elNavbar.child(sSelector). setDisplayed(true);

}

На этом выполнение функции showInnerList завершится.