Создание интерактивных Web-страниц
Давайте сначала составим список того, чему хотим "научить" наши интерактивные Web-страницы.
- Изменять размеры блочных контейнеров, формирующих дизайн интерактивных Web-страниц, чтобы они занимали всю клиентскую область окна Web-обозревателя.
- Менять цвет рамки у пунктов полосы навигации при наведении на них курсора мыши.
- Выполнять переход на Web-страницу при щелчке на любом месте соответствующего пункта полосы навигации, не обязательно точно на гиперссылке.
- Скрывать и открывать вложенные списки, формирующие полосу навигации, при щелчке на пункте "внешнего" списка, в который они вложены.
- Выделять пункт полосы навигации, соответствующий открытой в данный момент интерактивной Web-странице.
- Реализовать скрытие и открытие текста примеров на Web-страницах, посвященных отдельным тегам и атрибутам стиля, при щелчке мышью на заголовке "Пример:".
Довольно много, не так ли? Но библиотека Ext Core поможет нам сделать все с минимальным объемом кода.
Управление размерами блочных контейнеров
И первое, что мы сделаем, — заставим блочные контейнеры на наших интерактивных Web-страницах изменять свои размеры так, чтобы занимать всю клиентскую область окна Web-обозревателя и при этом не выходить за ее пределы.
Сначала откроем таблицу стилей main.css и найдем в ней стиль переопределения тега <BODY>. Изменим его так, как показано в листинге 16.1.
Мы добавили в этот стиль атрибут overflow со значением hidden, тем самым убрав у всей интерактивной Web-страницы полосы прокрутки. Они нам не нужны, более того, появляясь в самый неподходящий момент, они могут нарушить местоположение блочных контейнеров.
Сохраним таблицу стилей. И сразу же откроем файл Web-сценариев main.js. В самом его начале, еще до вызова метода onReady объекта Ext, вставим код листинга 16.2.
В конце тела функции, которую мы передаем в качестве параметра методу 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:
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();
Вот и все о создании интерактивных Web-страниц. Согласитесь — ничего сложного.
|
