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

Дронов Владимир
Шрифт:

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

— Скрывать и открывать вложенные списки, формирующие полосу навигации, при щелчке на пункте "внешнего" списка, в который они вложены.

— Выделять пункт полосы навигации, соответствующий открытой в данный момент Web-странице.

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

Довольно много, не так ли? Но библиотека Ext Core поможет нам сделать все с минимальным объемом кода.

Управление размерами блочных контейнеров

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

Сначала откроем таблицу стилей main.css и найдем в ней стиль переопределения тега <BODY>. Изменим его так, как показано в листинге 16.1.

Листинг 16.1

BODY { color: #3B4043; background-color: #F8F8F8; font-family: Verdana, Arial, sans-serif; margin: 0px; overflow: hidden }

Мы добавили в этот стиль атрибут overflow со значением hidden, тем самым убрав у всей Web-страницы полосы прокрутки. Они нам не нужны, более того, появляясь в самый неподходящий момент, они могут нарушить местоположение блочных контейнеров.

Сохраним таблицу стилей. И сразу же откроем файл Web-сценариев main.js. В самом его начале, еще до вызова метода onReady объекта Ext, вставим код листинга 16.2.

Листинг 16.2

function adjustContainers {

var clientWidth = Ext.lib.Dom.getViewportWidth;

var clientHeight = Ext.lib.Dom.getViewportHeight;

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

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

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

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

var cNavbarHeight = clientHeight — cHeaderHeight — cCopyrightHeight -30; Ext.get("cnavbar"). setHeight(cNavbarHeight); Ext.get("cmain"). setHeight(cNavbarHeight); Ext.get("cmain"). setWidth(clientWidth — cNavbarWidth—10); Ext.get("ccopyright"). setWidth(clientWidth);

}

В конце тела функции, которую мы передаем в качестве параметра методу onReady

объекта Ext, вставим два выражения:

Ext.fly(window). on("resize", adjustContainers);

adjustContainers;

Сохраним файл main.js. Откроем Web-страницу index.htm в Web-обозревателе — и сразу отметим, что блочные контейнеры приняли такие размеры, чтобы занять всю клиентскую область окна 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: