Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

Азы и секреты программирования на JavaScript.


Информационный Канал Subscribe.Ru
Азы и секреты программирования на JavaScript N 28
Архив предыдущих выпусков: http://subscribe.ru/
Форум по скриптовым языкам: http://script.net.ru/

Горизонтальное меню (продолжение)

Нас можно поздравить - основные проблемы построения структуры меню удалось решить. Теперь все меню автоматически расчитывает позиции элементов, как основных, так и скрытых. Теперь нет необходимости подгонять координаты места расположения меню. Кроме того весьма удачно, как мне кажется, решены проблемы совместимости с различными броузерами. На сегодня код корректно строит меню с броузерами: MS-IE последних версий, N-Navigator от версии 4.0, аналогичный Сибкон Коммуникатор, Mozilla ver 1.0, Opera версий 6.0 - 6.05.

Кроме того, Вы можете очень просто расширить совместимость сценария самостоятельно, если у Вас имеется версия какого-либо броузера, в котором отображение меню происходит с искажениями. Для этого надо будет только добавить несколько строк в файл brousers.js, дополнив его настройками на Ваш броузер. Если Вы к тому-же сообщите мне или в конференции о сделанных дополнениях, многотысячная аудитория читателей данной рассылки будет Вам только благодарна.

Части сценария

Для удобства работы я разбил код сценария на четыре основных файла:

  1. dropmnu.js - информационная часть меню и настройки его внешнего вида. Кроме того, в конце этого файла записаны загрузчики дополнительных служебных файлов JS - так "ленивее", нет необходимости перечислять все фалы JS в коде страницы.
  2. trees.js - функции, отвечающие за построение древовидной структуры на основе текстового массива, содержащего пункты меню. Эти функции мы уже рассматривали в предыдущих выпусках, когда делали древовидное меню, поэтому не будем на них останавливаться.
  3. brousers.js - файл, отвечающий за настройку на конкретный тип броузера. В этот файл вынесены все функции, по разному работающие в различных броузерах. Этих функций всего три: расчет координат HTML-элемента, смена цвета элемента, и переключение видимости элемента (спрятать/показать). Плюс, для более точной настройки позиций элементов на экране, введены поправки для координат X и Y, отличающиеся у разных броузеров.
    Дополнительно, в самом начале этого файла, размещены функции определения типа броузера клиента и функции, возвращающие текстовую строку, содержащую начальный и конечный тег для видимых (openvtag) и скрытых (openvtag) пунктов меню в зависимости от типа броузера.
    Благодаря такой структуре, мы имеем возможность очень просто добавлять сценарию новые уровни совместимости с другими тиами броузеров, если они появятся.
  4. hdrtree.js - файл, отвечающий за основную работу меню. Его мы рассмотрим более подробно.

Как все Это работает

в начале HTML-страницы надо разместить указатель на файл сценария меню:

<SCRIPT language="JavaScript" type="text/javascript" src="dropmnu.js"></SCRIPT>

Обратите внимание, нельзя размещать данный код выше тега STYLE, иначе N-Navigаtor его прочитает только со второго раза. Далее, в том месте HTML-кода страницы, где необходимо разместить видимую часть меню, пишем сценарий: 

<SCRIPT language="JavaScript" type="text/javascript">
//<--
  showmnu(DropMnu);
//-->
</SCRIPT>

<noscript>
  ваши ссылки
  для доступа
  из броузеров
  без поддержки
  сценариев JS
</noscript>

Данная функция построит в текущем месте страницы табличку из одной строки с видимыми пунктами меню. Причем каждому тегу, в котором содержится отдельный пункт меню, автоматически будет назначен свой идентификатор (атрибут ID=..), состоящий из нескольких букв и порядкового номера пункта меню.

Далее, если Вы испльзуете для форматирования страницы таблицы, после закрывающего тега самой внешней таблицы, в конце HTML-кода необходимо разместить еще одну строку сценария: initpops(DropMnu);. Данная строка вызовет сценариий, который расчитает положение на странице всплывающих элементов меню и построит их.

Сценарий в работе опирается на два массива: arrid и visi. Первый представлят из себя двумерный массив, в котором число элементов соответствует количеству пунктов меню. Каждый элемент данного массива, в свою очередь, содержит массив порядковых номеров подчиненных подпунктов элемента меню с соответствующим порядковым номером. Поясню на примере: у пункта меню, получившего номер 4 имеется дополнительный уровень из элементов с номерами 7, 8, 9. Значит в массиве arrid четвертый элемент массива будет содержать последовательность чисел "7, 8, 9". При наведении курсора на четвертый пункт меню сценариий, обрабатывающиий данное событие, получит содержимое четвертого элемента массива arrid, и включит отображение пунктов меню с соответствующими номерами.

При уходе курсора за пределы текущего пункта меню происходит немного более сложный процесс, для работы которого нужен массив visi. В данном массиве содержатся переключатели, отображающие состояние появляющихся пунктов меню (видимый - скрытый). Дело в том, что как я уже отмечал в предыдущем выпуске, для удобства в работе, выключение необходимо производить с небольшой задержкой по времени. Поэтому, обработчик события выхода курсора мыши за пределы элемента не переключает элементы в состояние "скрытый", а устанавливает соответствующие номерам скрываемых пунктов меню элементы массива visi в положение "выключить" и запускает таймер. Таймер после окончания установленного времени задержки проверяет состояние всех элементов массива visi и переводит требуемые элементы в положение "скрытый".

Если за время работы таймера положение курсора мыши изменилось так, что элементы, поставленные "в очередь" на выключение должны быть снова видимы, обработчик события "наезда" курсора на элемент к этому моменту успеет переключить нужные элементы массива visi в положение "видимый", и запущенный ранее таймер не станет их выключать.

Не буду загромождать рассылку кодом сценария меню - он достаточно длинный. На сайте script.net.ru в разделе "Примеры кода" доступен для скачивания работающий код меню.

Eсли Вы ищете качественный и недорогой web-хостинг, лично я рекомендую PeterHost.Ru. Российский, прекрасные каналы, сервис "на уровне".
Автор и ведущий рассылки И. Балезин
Лучший хостинг в Рунете
InterReklama Advertizing
Интерреклама. Интернет
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное