FunctionclickHandler()

{

var targetId, srcElement, targetElement;

srcElement = window.event.srcElement;

if (srcElement.className == "menu")

{ targetId = srcElement.id + "List"; targetElement = document.all(targetId);

if (targetElement.style.display == "none")

{ targetElement.style.display = "";}

else

{ targetElement.style.display = "none";}

}

}

document.onclick = clickHandler

</script>

В приведенном скрипте описана функция с именем clickHandler, которая запускается при каждом щелчке мыши на Web-странице (такой запуск функции обеспечивает последняя строка скрипта).

Функция clickHandler выполняет следующие действия:

- вначале объявляются три переменные: targetId, srcElement, targetElement;

- переменная srcElement становиться типом объект и ей присваивается объект, над которым был выполнен щелчок мыши;

- если имя класса стиля этого объекта (свойство className) соответствует указанному имени (в примере - menu), то переменной targetId присваивается значение, равное имени объекта с присоединением текста List. Затем объект с сформированным именем присваивается переменной targetElement, которая становиться типом объект;

- если объект targetElement не отображается на экране, то его свойство style.display переопределяется, и объект становиться видимым, иначе объект скрывается с экрана.

Проверить работу скрипта и продемонстрировать преподавателю.

Созданную функцию с именем clickHandler можно использовать многократно для создания любого количества раскрывающихся списков (слоев). При этом должны выполняться следующие условия:

· имя каждого пункта меню (задаваемого при помощи атрибута id) должно быть уникальным, а имя раскрываемого списка (слоя div) должно отличаться от него на постоянную величину – в приведенном примере – List;

· имя класса стиля у всех контейнеров с названиями пунктов должно быть одинаковым и совпадать с именем, используемым для идентификации объектов в скрипте (в приведенном примере class=menu).

Упражнение 1. Во фреймовой структуре сайта банка (или со структурой по технологии SSI) на странице меню оформить рассмотренным методом список сотрудников банка под пунктом Коллектив в виде раскрывающегося списка (рис. 5.5).

Рис. 5.5. Пример меню с раскрывающимся списком под пунктом Коллектив

Добавить в меню банка еще один раскрывающийся список под пунктом Главная с гиперссылками на разделы Депозитные и Кредитные схемы.

Обновленный вариант сайта разместить на Web-сервере института, проверить работу скрипта и сообщить преподавателю. Преподаватель будет просматривать результат Вашей контрольной работы именно на Web-сервере и выставит оценку.

Упражнение 2. Ниже приведен код еще одного варианта динамического меню. Скопировать в файл новой страницы следующий код:

<style>

.menu{ position: absolute; top:0; z-index: 2;}

.submenu{ position: absolute; top: 22; z-index: 0; visibility: hidden;}

</style>

<script>

var old; var memold; var subold;

if(document.layers)

{ window.captureEvents(Event.MOUSEDOWN); window.onmousedown=do_out; }

else { document.onmouseup=do_out; }

Не нашли, что искали? Воспользуйтесь поиском: