HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30;
Для этого вычитаем из высоты клиентской области высоту контейнеров cheader и ccopyright и дополнительно 30 пикселов — чтобы создать отступ между нижним краем контейнера ccopyright и нижним краем клиентской области.
Задаем полученное ранее значение в качестве высоты контейнеров cnavbar и cmain:
Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight);
Задаем ширину контейнера cmain:
Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth — 10);
Ее значение
Напоследок задаем ширину контейнера ccopyright равной ширине клиентской области окна Web-обозревателя:
Ext.get("ccopyright"). setWidth(clientWidth);
На этом выполнение функции adjustContainers закончилось.
Теперь рассмотрим два выражения, помещенные в тело функции, являющейся параметром метода onReady объекта Ext.
Привязываем функцию adjustContainers в качестве обработчика к событию resize окна Web-обозревателя:
Ext.fly(window). on("resize", adjustContainers);
И сразу же ее вызываем, чтобы контейнеры приняли правильные размеры сразу после загрузки Web-страницы:
adjustContainers;
Вот и все. Согласитесь — ничего сложного.
Выделение пункта полосы навигации при наведении на него курсора мыши
Ну, это мы уже сделали. В листинге 16.3 приведен написанный нами в главе 14 JavaScript-код.
Листинг 16.3
var ceLinks = Ext.select("UL[id=navbar] LI");
ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");
});
ceLinks.on("mouseout", function(e, t) { Ext.get(this). removeClass("hovered");
});
Разберем его построчно.
Сначала получаем все пункты списков, формирующих полосу навигации, — и "внешнего", и всех вложенных:
var ceLinks = Ext.select("UL[id=navbar] LI");
Затем привязываем к событию mouseover полученных пунктов функцию-обработчик, которую там же и объявляем:
ceLinks.on("mouseover", function(e, t) { Ext.get(this). addClass("hovered");});
Этот обработчик сначала получит из переменной this экземпляр объекта HTMLElement, представляющий пункт списка, к которому, собственно, он и привязан. Вызовом метода get он преобразует его в экземпляр объекта Element и вызовом метода addClass привяжет к нему стилевой класс hovered (его определение см. в главе 14), который изменит цвет рамки этого пункта.
Также привязываем обработчик к событию 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-страницу, на которую указывает гиперссылка уже пункта "внешнего" списка, что нам совсем не нужно. Поэтому мы останавливаем дальнейшее всплытие события.