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

обозревателя. Попробуем изменить размеры окна и понаблюдаем, как меняются размеры контейнеров.

Но как все это работает? Сейчас разберемся.

Код, добавленный нами в файл main.js, объявляет функцию adjustContainers, которая станет обработчиком события resize окна Web-обозревателя. Именно эта функция будет задавать размеры контейнеров. Давайте рассмотрим ее код построчно.

Сначала мы получаем ширину и высоту клиентской области окна Web-обозревателя:

var clientWidth = Ext.lib.Dom.getViewportWidth();

var clientHeight = Ext.lib.Dom.getViewportHeight();

К данным значениям мы будем обращаться не один раз, так что лучше сохранить их в переменных. Ведь доступ к переменной выполняется значительно быстрее, чем вызов метода.

Затем получаем ширину контейнера cnavbar, высоту контейнеров cheader и ccopyright:

var cNavbarWidth = Ext.get('cnavbar'). getWidth();

var cHeaderHeight = Ext.get('cheader'). getHeight();

var cCopyrightHeight = Ext.get('ccopyright'). getHeight();

Эти значения также понадобятся нам в дальнейшем.

Далее задаем ширину контейнера cheader равной ширине клиентской области окна Web- обозревателя:

Ext.get('cheader'). setWidth(clientWidth);

Вычисляем высоту контейнеров cnavbar и cmain:

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);

Ее значение получаем, вычтя из ширины клиентской области ширину контейнера cnavbar и еще 10 пикселов — величину внешнего отступа между ними (он задан в именованном стиле navbar атрибутом стиля margin-right).

Напоследок задаем ширину контейнера 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');