ВЕБ-ШКОЛА: Иерархическое (многоуровневое) меню навигации на JavaScript (часть 3)

РЕКЛАМА

Разное

Иерархическое (многоуровневое)
меню навигации на JavaScript (часть 3)

Глава 2. Взгляд изнутри.

Как уже упоминалось в Главе 1, весь код меню сосредоточнен в трех файлах JavaScript'ов (расширение .js), файле стилей для форматирования меню (menu.css) и 7-8 строк в html-документе, связывающих их между собой. Деление JavaScript-кода на три файла совсем не обязательно и сделано, во-первых, для отделения заполнения содержания меню от кода и, во-вторых, для разделения кода объектов, составляющих меню, от обработчиков событий DHTML. Это деление сделано для удобства, можно объединить эти файлы при необходимости (это, между прочим, должно уменьшить размер html-файла и количество обращений по сети, хотя совсем не значительно).

HTML-документ. Рассмотрим строки, которые необходимо включить в html-документ для создания меню. Во-первых, для форматирования меню, т.е. задания шрифта, размеров, цветов и пр., используются стили, определенные в файле menu.css. Для включения стилей можно использовать несколько способов, в данном случае мы используем тег <LINK>, который формально можно считать параметром тега <HEAD> (<LINK> можно употреблять только внутри <HEAD> </HEAD>). Тэг <LINK> описывает различные взаимосвязи. Если его параметр rel = "STYLESHEET", то параметры type и href должны опысывать тип страницы стилей (STYLESHEET) и путь к файлу стилей, например,

<link rel="STYLESHEET" type="text/css" href="path_to_css/menu.css">

Параметр type="text/css", т.к. используются каскадные листы стилей первого уровня (CSS, Cascading Style Sheets, level 1). Хотя лишь CSS на сегодняшний день имеют практическое значение в HTML, тип необходимо указывать для устранения неоднозначности и совместимости с более поздними версиями HTML. Более подробнее о теге LINK, можно прочитать в справочной документации (например, в MSDN Library или на сервере W3C).

Во-вторых, необходимо включить файлы скриптов в страницу. Для этого используется параметр src тега script.

<SCRIPT LANGUAGE="JavaScript" SRC="path_to_scripts/filename.js"></SCRIPT>

ВАКАНСИИ (Компьютеры, Интернет). Подробнее >>

При интерпретации этой строки браузер скачивает файл path_to_scripts/filename.js и выполняет его код. Подобный подход к включению сценариев в страницу ничем не отличается от прямого указания кода в html-документе за исключением кэширования файла path_to_scripts/filename.js при переходе с одной странице сайта на другую (если конечно он используется на обеих станицах). При включении нескольких таких файлов, их интерпретация (и исполнение) происходит в порядке их следования в html-документе. В нашем случае:

<SCRIPT LANGUAGE="JavaScript" SRC="path_to_scripts/kcmmenu.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="path_to_scripts/menucont.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="path_to_scripts/handles.js"></SCRIPT>

выполнение сценариев происходит в таком порядке: kcmmenu.js, menucont.js, handles.js.

Следующая строка вызывает функцию построения меню ConstructMenu(), которая собственно и рисует полосу меню на экране.

<SCRIPT LANGUAGE="JavaScript">ConstructMenu(menu);</SCRIPT>

Эта функция определена в файле kcmmenu.js. Ей передается глобальный объект menu, создаваемый в файле menucont.js (см. Главу 1, Листинг 1).

Следующие строки определяют функции, которые будут вызываться, если будут происходить заданные события.

<SCRIPT FOR=submenu EVENT=onmouseover>doEventMenu();</SCRIPT>
<SCRIPT FOR=submenu EVENT=onmouseout>doEventMenu();</SCRIPT>
<SCRIPT FOR=menupunkt EVENT=onmouseover>doEventSubMenu();</SCRIPT>
<SCRIPT FOR=menupunkt EVENT=onmouseout>doEventSubMenu();</SCRIPT>
<SCRIPT FOR=menupunkt EVENT=onclick>doEventSubMenu();</SCRIPT>

Как известно, DHTML позволяет некоторым (в версии MS Internet Explorer 4.0+ почти всем) тегам реагировать на такие события как onmouseover, onmouseout, onclick и др. Как правило, обработка этих событий включается по следующей схеме:

<TAG ... onmouseover="Функция_обработчик()">... <TAG>.

В нашем случае можно было бы поступить также, но при наличии 20-30 таких тегов размер документа может значительно увеличиться. Однако, если у этих тегов одинаковые идентификаторы id, то можно простой строкой

<SCRIPT FOR=id_tag EVENT=onmouseover> Функция_обработчик(); </SCRIPT>

заставить все теги с id=id_tag (id – атрибут каждого тега) вызывать функцию Функция_обработчик() при событии onmouseover (или ему подобному). В нашем случае все теги с id=submenu и id=menupunkt вызывают соответсвующие функции при событиях от действий мышки. [> далее >]

Каждому сайту - механизм организации собственной ленты новостей бесплатно! Подробнее >>

ПОИСК по сайту: