Створення інтерактивних web-сторінок, блокові контейнери

Давайте спочатку складемо список того, чого хочемо "навчити" наші інтерактивні Web-сторінки.

- Змінювати розміри блокових контейнерів, які формують дизайн інтерактивних Web-сторінок, щоб вони займали всю клієнтську область вікна Web-оглядача.

- Міняти колір рамки у пунктів смуги навігації при наведенні на них курсора миші.

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

- Приховувати і відкривати вкладені списки, що формують смугу навігації, при натисканні на пункті "зовнішнього" списку, в який вони вкладені.

- Виділяти пункт смуги навігації, відповідний відкритої в даний момент інтерактівнойWeb-сторінці.

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

Досить багато, чи не так? Але бібліотека Ext Core допоможе нам зробити все з мінімальним об'ємом коду.

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

І перше, що ми зробимо, - змусимо блокові контейнери на наших інтерактивних Web-сторінках змінювати свої розміри так, щоб займати всю клієнтську область вікна Web-оглядача і при цьому не виходити за її межі.

Спочатку відкриємо таблицю стилів main.css і знайдемо в ній стиль перевизначення тега . Змінимо його так, як показано в лістингу 16.1.

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

Збережемо таблицю стилів. І відразу ж відкриємо файл Web-сценаріїв main.js. У самому його початку, ще до виклику методу onReady об'єкта Ext, вставимо код лістингу 16.2.

В кінці тіла функції, яку ми передаємо як параметр методу onReady об'єкта Ext, вставимо два вирази:

Збережемо файл 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 ();

До даних значень ми будемо звертатися неодноразово, так що краще зберегти їх в змінних. Адже доступ до змінної виконується значно швидше, ніж виклик методу.

Ці значення також знадобляться нам надалі.

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

Обчислюємо висоту контейнерів cnavbar і cmain:

Задаємо отримане раніше значення в якості висоти контейнерів cnavbar і cmain:

Задаємо ширину контейнера cmain:

Ext.get ( "cmain"). SetWidth (clientWidth - cNavbarWidth - 10);

Її значення отримуємо, вирахувавши з ширини клієнтської області ширину контейнера cnavbar і ще 10 пікселів - величину зовнішнього відступу між ними (він заданий в іменованому стилі navbar атрибутом стилю margin-right).

На цьому виконання функції adjustContainers закінчилося.

Тепер розглянемо два вирази, поміщені в тіло функції, що є параметром методу onReady об'єкта Ext.

Прив'язуємо функцію adjustContainers в якості обробника до події resize вікна Web-оглядача:

І відразу ж її викликаємо, щоб контейнери взяли правильні розміри відразу після завантаження Web-сторінки:

Ось і все про створення інтерактивних Web-сторінок. Погодьтеся - нічого складного.