Как создать полосу навигации

Проблема

"Горячие" изображения, гиперссылки со всплывающими подсказками — это, конечно, замечательно. Но старая добрая полоса навигации выглядит куда лучше...

Решение

Что ж, полоса навигации — тоже не бог весть какая сложность. По сути, полоса навигации — это набор "горячих" изображений, помещенных в таблицу. Последовательность действий по ее созданию такова:

1. Готовим набор изображений, необходимых для создания каждого "горячего" изображения — элемента полосы навигации. Для каждого такого элемента изображений должно быть четыре: отображающее обычное состояние, выводящееся при наведении курсора мыши, "нажатое" состояние и "нажатое" состояние при наведении курсора мыши.

Создаем таблицу либо из одной строки (для горизонтальной полосы навигации), либо из одного столбца (для вертикальной) и нужного количества ячеек.

3. Создаем в каждой ячейке этой таблицы "горячее" изображение с использованием изображений, подготовленных на первом шаге.

4. Пишем все необходимые Web-сценарии (меняющие изображения и выполняющие переход при щелчках).

Народ предупреждает!

Всегда следует проверить, все ли изображения подготовлены. Иначе возможно появление в полосе навигации "пустых мест", что выглядит очень неаккуратно.

Для облегчения задачи создания полосы навигации автором был написан универсальный объект NavBar (листинг 7.2). Формат вызова его функции-конструктора таков:

NavBar(<Массив, описывающий элементы полосы навигации>, <Номер элемента полосы навигации, "нажатого" изначально> [, Горизонтальная или вертикальная> [, <Стилевой класс, который будет привязан к полосе навигации>]]);

Второй параметр задает номер элемента полосы навигации, который должен быть "нажатым" изначально. Обычно изначально "нажатым" делают элемент, соответствующий текущей странице. Не забываем при этом, что элементы полосы навигации нумеруются, начиная с нуля.

Третий, необязательный, параметр указывает, какую полосу навигации мы хотим создать: горизонтальную (значение false) или вертикальную (значение true). Если он пропущен, полоса навигации будет горизонтальной.

С четвертым, также необязательным, параметром все ясно — он передает в конструктор имя стилевого класса, который будет привязан к полосе навигации (точнее, к создающей ее таблице). Это имя передается в строковом виде. Если оно не указано, никакого стилевого класса к полосе навигации привязано не будет.

А теперь рассмотрим первый параметр. Он передает конструктору массив, описывающий элементы полосы навигации. Каждый элемент этого массива представляет собой другой массив, элементы которого задают следующие параметры соответствующего ему элемента полосы навигации:

интернет-адрес файла изображения, отображающего обычное состояние данного элемента полосы навигации;

интернет-адрес файла изображения, выводящегося при наведении на элемент курсора мыши;

интернет-адрес файла изображения, отображающего "нажатое" состояние данного элемента;

интернет-адрес файла изображения, выводящегося при наведении на "нажатый" элемент курсора мыши;

интернет-адрес, по которому будет выполнен переход при щелчке на данном элементе;

цель предыдущего интернет-адреса. Возможные значения этого параметра приведены в начале текущей главы.

Нужно иметь в виду, что этот массив должен существовать все время, пока существует страница (т. е. быть глобальным). Дело в том, что объект NavBar использует его для вывода полосы навигации и, если этот массив оказался недоступным (например, если мы его удалим), не сможет правильно ее отобразить.

Метод putHere объекта NavBar выводит готовую полосу навигации в то место, где встретилось выражение с его вызовом. Этот метод не принимает параметров и не возвращает значения.

Метод setpressed делает элемент полосы навигации, номер которого передан в качестве единственного параметра, "нажатым". Этот метод не возвращает значения.

Листинг 7.2. Объект NavBar, создающий на Web-странице полосу навигации

// Счетчик созданных к данному времени экземпляров объекта NavBar var jsps_NB_counter = 0;

// Список всех созданных к данному времени экземпляров объекта NavBar var jsps_NB_list = new Array();

// Функция-конструктор

function NavBar(elArray, pPressed, plsVert, pClassName) {

if (!pIsVert) plsVert = false;

this.pressed = pPressed;

this.elements = elArray;

this.isVert = plsVert;

this.className = pClassName;

this.putHere = mjspsNBPutHere;

this.setPressed = mjspsNBSetPressed;

// Создаем имя для таблицы, которая станет полосой навигации. // Это имя пригодится нам потом this.id = "NB" + this;

// Номер данного экземпляра объекта в списке jsps_NB_list this.myNumber = jsps_NB_counter;

// Заносим данный экземпляр объекта в список jsps_NB_list jsps_NB_list[jsps_NB_counter] = this;

// Увеличиваем счетчик экземпляров этого объекта на единицу, // подготавливая его для создания нового экземпляра j sps_NB_counter++; }

// Функция, реализующая метод putHere function mj spsNBPutHere() { var s = "<TABLE ID=\"" + this.id.toString() + "\""; if (this.className) s += " CLASS=\"" + this.className + "\""; S += ">";

if (!this.isVert) s += "<TR>"; for (var i = 0; i < this.elements.length; i++) {

var el = this.elements[i];

if (this.isVert) s += "<TR>";

S += "<TDXA HREF=\"" + el[4] + "\"";

if (el[5]) s += " TARGET=\"" + el[5] + "V";

s += " ONCLICK=\"jspsNBPressElementC + this.myNumber.toString() + ", " + i.toStringO + ");\">";

s += "<IMG SRC=\"";

s += (this.pressed == i) ? el[2] : el[0];

s += "\"";

s += " ONMOUSEOVER=\"jspsNBSwapElement(" + this.myNumber.toString() + ", " + i.toStringO + ", true);\"";

s += " ONMOUSEOUT=\"jspsNBSwapElement(" + this.myNumber.toStringO + ", " + i.toStringO + ", false) ;\"";

s += " BORDER=\"0\"";

s += "</A></TD>";

if (this.isVert) s += "</TR>"; } if (!this.isVert) s += "</TR>"; S += "</TABLE>"; document.write(s); }

// Служебная функция, возвращающая изображение — // элемент полосы навигации по его номеру function jspsNBGetElement(my, elementlndex)

{ var nbObject = document.all[my.id]; if (my.isVert)

var elObject = nbObject.firstChild.childNodes[elementlndex]. firstChild.firstChild.firstchild else

var elObject = nbObject.firstChild.firstChild. childNodes[elementlndex].firstChild.firstChild; return elObject; }

// Функция, реализующая метод setPressed function mjspsNBSetPressed(elementlndex) {

this.pressed = elementlndex;

for (var i = 0; i < this.elements.length; i++) {

var elObject = jspsNBGetElement (this, i) ; elObject.src = (this.pressed == i) ? this.elements[i][2] : this. elements [i] [0]; } }

// Функция — обработчик события onclick изображения — элемента полосы // навигации. Занимается тем, что переключает элемент //в "нажатое" состояние

function jspsNBPressElement(myNumber, elementlndex) { var my = jsps_NB_list[myNumber];

var elObject = jspsNBGetElement(my, elementlndex); my.setPressed(elementlndex); }

// Функция — обработчик событий onMouseOver и onMouseOut изображения — // элемента полосы навигации. Фактически реализует "горячее" изображение function jspsNBSwapElement(myNumber, elementlndex, state) {

var my = jsps_NB_list[myNumber];

var elObject = jspsNBGetElement(my, elementlndex);

if (state)

elobject.src = (my.pressed == elementlndex) ? my.elements[elementIndex][3] : my.elements[elementIndex][1] else

elobject.src = (my.pressed == elementlndex) ? my.elements[elementIndex] [2] : my.elements[elementlndex] [0]; }

Хорошая идея!

Поместите объявление этого объекта в файл сценариев navbar.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="navbar.js"></SCRIPT>

Пример

Далее приведены HTML-коды двух Web-страниц, содержащих полосы навигации и с их помощью связанные друг с другом.

Вот HTML-код страницы page 1 .html:

<HTML> <HEAD>

<TITLE>Страница 1</TITLE> <SCRIPT SRC="navbar. js"></SCRIPT>

<!-- Предполагается, что объявление объекта NavBar было помещено в файл сценариев navbar.js --> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript"> var els = new Array();

els[0] = new ArrayPl-l.gif", "l-2.gif", "l-3.gif", "1-4.gif", "pagel.html");

els[l] = new Array("2-1.gif", "2-2.gif", "2-3.gif", "2-4.gif", "page2.html");

var nbObject = new NavBar(els, 0); nbObject.putHere(); </SCRIPT> </BODY> </HTML>

А вот HTML-код страницы page2.html:

<HTML> <HEAD>

<TITLE>Страница 2</TITLE> <SCRIPT SRC="navbar.js"></SCRIPT>

<!-- Предполагается, что объявление объекта NavBar было помещено в файл сценариев navbar.js --> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript"> var els = new Array ();

els[0] = new Array("1-l.gif", "l-2.gif", "l-3.gif", "l-4.gif", "pagel.html");

elsf[1] = new ArrayC2-l.gif", "2-2.gif", "2-3.gif", "2-4.gif", "page2.html");

var nbobject = new NavBar(els, 1); nbObject.putHere(); </SCRIPT> </BODY> </HTML>

Как видим, обе страницы практически идентичны. Единственное существенное отличие — значение второго параметра конструктора объекта NavBar. В странице pagel.html мы передаем им значение 0, поскольку первый элемент полосы навигации, "отвечающий" за эту страницу, мы хотим сделать изначально "нажатым". (Поскольку в Web-обозреватель загружена страница pagel.html, то именно первый элемент полосы навигации и должен быть "нажат", не так ли?) В странице page2.html уже передается значение 1 — мы делаем "нажатым" изначально второй элемент полосы навигации, поскольку именно он ссылается на страницу page2.html. В результате полоса навигации на обеих страницах будет работать корректно.

Попробуем открыть страницу pagel.html в Web-обозревателе. Полоса навигации будет благополучно создана, и первый ее элемент, ссылающийся на страницу pagel.html, станет "нажатым" по умолчанию. Теперь щелкнем по второму элементу полосы и посмотрим, что получится.

Народ замечает

Пожалуй, явное указание элемента полосы навигации, который должен быть "нажат" изначально, — лучший подход в данном случае.

Можно, конечно, попытаться написать сценарий, который будет извлекать из свойства pathname объекта location, вложенного в объект window, путь и имя текущей страницы и сравнивать его с интернет-адресами, хранящимися в массиве элементов полосы навигации, но это очень сложно и чревато многими проблемами. Как правило, подобные сценарии работают правильно, если страницы загружаются с Web-сервера, но если они открываются с локального компьютера, начинают давать сбои.

Народ советует

Многие программы Web-редакторов и пакетов интернет-графики позволяют создавать полосы навигации. В частности, популярнейший Web-редактор Macromedia Dreamweaver поможет создать вполне приличную полосу навигации из уже подготовленного набора изображений. А создание полосы навигации в мощном пакете растровой интернет-графики Macromedia Fireworks — совсем простое дело!

Что дальше?

Битва со средствами навигации закончена. И легкие гиперссылки, и тяжеловооруженные полосы навигации повержены. Наши победили.

С поля брани мы попадем прямо за парту. У доски стоит народ и нервно щелкает указкой. Тема урока — таблицы и работа с ними.