Статьи
Заглянем внутрь Java Script
(2 часть).
Привет, в этой статье мы постараемся
разобраться, как написать скрипт, для работы со слоями, одинаково
подходящий, как для IE, так и для NN.
Слоями могут быть блоки с графикой, текстом
и т.д. Просто каждый блок должен быть заключен в тег <div>
и тегу надо дать уникальный ID.
Для нетскейпа и эксплорера слои обозначаются
по разному, конечно можно написать отдельно функции для NN и отдельно
для IE, с проверкой версии браузера. Но представим, что нам надо
написать 4 функции, а 8, а теперь все это умножить на два - впечатляет!?
Мы напишем скрипт, который будет работать в
обоих браузерах, но будет в два раза короче.
Предположим, мы хотим спрятать слой. Посмотрим
как должна выглядеть строка для NN:
document.layers.LayerName.visibility = 'hidden';
А вот строка для IE:
document.all.LayerName.style.visibility = 'hidden';
Ну как увидели разницу? Для NN мы используем
обозначение слоев - layers, для IE - all, также для IE, для обозначения
стиля используется - style, а в NN мы ничего не ставим
Для оптимальной работы кода мы создадим две переменные и поставим
проверку на имя браузера:
if (navigator.appName == "Netscape")
{
var layerRef=".layers.";
var styleRef="";
}
else
{
var layerRef=".all.";
var styleRef=".style";
}
Теперь для NN и IE у нас есть переменные содержащие нужные обозначения
и мы воспользуемся командой eval, которая как бы "склеивает"
строки. Вот как будет это выглядеть:
eval("document" + layerRef +"def_sloy" + styleRef
+ ".visibility = 'hidden'");
Теперь пишем нужное количество строк, показывающих 'visible' и
убирающих 'hidden' слои. Объединяем их в функции относительно
каждого слоя. Функции должны срабатывать на ссылках по действию
onclick="ИМЯ_ФУНКЦИИ", href=#.
Итак, теперь наш скрипт для работы со
слоями будет занимать вдвое меньше места.
<< назад
Наша кнопка
Если вам понравился наш сайт, то
мы будем очень признательны вам, если вы разместите нашу кнопочку
размера 88х31 у себя на страничке (сайте).
Для этого достаточно прописать у себя на странице этот код:
<!-- leg-design-->
<a HREF="http://leg-design.narod.ru" target="_blank
">
<img SRC="http://leg-design.narod.ru/images/banner_80.gif"
BORDER="0"
alt="Все о web-дизайне" width="88" height="31"></a>
<!-- leg-design end -->
