Введение
Internet Exploter 4.0 (IE) и Netscape Communicator 4.0
(NC) по разному интерпретируют HTML 4.0. Поэтому прежде, чем рассматривать
принципы создания Динамических HTML, рассмотрим основные отличия этих браузеров
и как с ними бороться.
Различия в реализации
IE представляет слои с помощью CSS и тэга div, в то
время как NC советует использовать изобретенный им тэг layer.
Тэг layer ничем не отличается от CSS, за исключением
параметра source, с помощью которого можно указать внешний файл в котором
хранится содержимое слоя. Если Вы не собираетесь поддерживать IE, лучше выбрать
синтаксис NC. Это позволит строить сложные документы и не повторять во всех
файлах стандартные слои, такие как навигационнфя панель или шапка страницы.
На этом проблемы совместимости не заканчиваются, а
только начинаются. Классы JavaScript в IE и NC также реализованны по разному.
Например, чтобы показать слой в NC надо сказать:
document.layers["loading"].visibility="visible";
а в IE:
document.all["loading"].style.visibility="visible";
Наш урок носит обзорный характер, поэтому мы не будем
подробно рассматривать все различия реализации языка. Посмотрим лучше, как
решаются эти проблемы.
Как с ними бороться
Слава Netscape, в JavaScript есть пракрасная функция
eval(). Она параметр в строку и интерпретирует ее так, как-будто это строка
программы. Чтобы корректно спрятать слой как в IE, так и в NC необходимо
написать следующую строку:
eval(layerRef+'["loading"]'+styleSwitch+'.visibility="visible"');
Теперь все, что остается, это правильно инициализовать
переменные layerRef и styleSwitch с помощью следующего кода:
вызвав его в тэге body:
<body onload="init();">
Прятание и показывание слоя
Теперь давайте для разминки напишем код, который прячет
указанный нами слой. Создадим функцию hideLayer с параметром, содержащим имя
слоя, несколько изменив приведенный выше eval(...):======
Пример. Предзагрузка изображений для правильного их показа.
Создадим два слоя. Уже извесное нам сообщение о
загрузке (им может быть какая-нибудь новость или цитата)
Движение слоя по окну
Для примера рассмотрим движение сверху вниз. Затем по
аналогии Вы сможете организовывать перемещение в других направлениях или по
более сложным траекториям. Для того, чтобы осуществить перемещение нужно знать
четыре значения: текущее положение, место остановки, шаг перемещения, время
задержки. Мы ограничимся двумя переменными, а шаг и задержку зададим
константами.
Свертывание и развертывание слоя
Рассмотрим более сложную операцию - свертывание и
развертывание слоя. Будем выполнять ее по горизонтали. По вертикали эта операция
выполняется аналогично. Для ее выполнения нам нужно знать ширину слоя. Если мы
хотим свернуть слой, никаких предварительных действий предпринимать не надо, но
если мы хотим его развернуть, то нужно установить область обреза с левым и
правым краями, равными половине ширины слоя. Это можно установить при
определении слоя, или в начале программы JavaScript. При этом надо не забыть
предварительно спрятать слой для устранения мелькания.
Создадим функцию свертки/развертки:
function curtainWidth(layerName,xinc,inctime,stopwidth)
второй параметр определяет величину прироста/уменьшения
ширины, третий - задержку, а четвертый - конечную ширину. Если мы развертываем
слой, то конечная ширина должна быть равна ширине слоя, если свертываем, то
нулю.
Заключение
Мы только-что рассмотрели три простых операции над
слоями. Продумав дизайн и немного усложнив функции, можно с помощью этих
операций добиться потрясающего эфекта на ваших страницах.
Литература по DHTML
| 
