HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Далее выполняем переход на полученный интернет-адрес:
window.location.href = href;
}
На этом блок "то" условного выражения закончен.
Вот и все. Теперь посетители нашего Web-сайта, чтобы перейти на другую Web- страницу, могут щелкать на любом месте пункта полосы навигации, не обязательно точно на находящейся в нем гиперссылке.
Что ж, настало время создать остальные Web-страницы нашего Web-сайта. Точнее, переделать их под новый дизайн.
Откроем папку tags, где хранятся файлы Web-страниц, описывающих различные теги HTML. Переименуем их все,
Дальнейшие действия рассмотрим на примере 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="#" TYPE="text/css">
<SCRIPT SRC="../ext-core.js"></SCRIPT>
<SCRIPT SRC="../main.js"></SCRIPT>
А вот HTML-код, формирующий гиперссылки на Web-страницы index.htm и t_img.htm:
<LI><A href="#">HTML</A>
<LI><CODE><A href="#">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 завершится.
Теперь вставим в конец тела функции, которая передается в качестве параметра методу onReady объекта Ext, такое выражение:
showInnerList(outerIndex);
Здесь мы вызываем функцию showInnerList, передавая ей в качестве параметра значение переменной outerIndex. Эта переменная будет хранить номер вложенного списка, который требуется открыть.