Яндекс цитирования
 

Web-программирование

 

[ В начало раздела ]

Создание навигатора по WEB-сайту на JavaScript

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

Конечно, если сайт состоит не более из 10 страниц, иможно вставлять скрипт навигации в каждую страницу. Но при увеличении количества страниц, такой подход является неправильным. Таким образом, стоит поговорить о том, как сделать наше решение масштабируемым.

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

Вот как выглядит наша задача.

  • 1. Получить идентификатор страницы, для которой строится навигатор;
  • 2. Создать навигатор;
  • 3. Создать скрипт-обработчик действий навигатора.
Что такое идентификатор страницы? Это Вами устанавливаемый индекс для страницы, который Вам бы хотелось один раз установить для страницы. Например, на моем сайте для страницы "Поиск" установлен индекс 3, а для "Авторской песни" - 14. Если появится новая страничка в любом из разделов, я просто установлю для нужный порядковый индекс.

Итак, начнем. Скрипт навигатора будет храниться в корневом каталоге Web-сервера под именем "webnav.js". А место в web-странице, куда будет встраиваться навигатор, будет оформлено следующим кодом.

<script>navigateMenu(xxx);</script>
где xxx - идентификатор страницы.

Давайте теперь определим, как будем хранить данные о названии раздела/страницы, ее URL-адресе и идентификаторе.

Составим дескриптивную структуру web-страницы:

webpage { address; name; pageID }.

Таким образом в нашем скрипте создаем и формируем массив структур webpage.

var navpages = new Array(
  new webpage("\"\"","выберите страницу...", 0),
  new webpage("\"\"","__________________", -1),
  new webpage("/page1.html","page1", 1),
  new webpage("\"\"","__________________", -1),
  new webpage("/page2.html","page2", 2),
  new webpage("/page2_1.html","- page2.1", 4),
  new webpage("\"\"","__________________", -1),
  new webpage("/page3.html","page3", 3)
);

function webpage (URLaddress, optionname, pageindex) { this.address = URLaddress; this.name = optionname; this.pageID = pageindex; }

Заметим, что для формирования пустой ссылки необходимо указывать две двойные кавычки, иначе браузер выкинет ошибку. Такие двойные кавычки формируются аналогично Perl - \"\".

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

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

function navigateMenu(k) {
  document.write("<FORM>");
  document.write("<SELECT "+
  "onchange=\"if (this.options[this.selectedIndex].value == '') this.selectedIndex=0; "+
  "else window.open(this.options[this.selectedIndex].value,'_top')\">");
  for(i=0;i<navpages.length;i++) {
    var s = "";
    s = "<OPTION value="+navpages[i].address;
    if (navpages[i].pageID==k) {s+=" selected";}
    s += ">"+navpages[i].name+"</OPTION>";
    document.write(s);
  } 
  document.write("</SELECT>");
  document.write("</FORM>");
}

Остается в Web-странички, где используется навигатор вставить в область HEAD опцию, подцепляющую наш скрипт.

<script language="JavaScript" src="webnav.js"></script>

Вот и все! Легко, полезно и мощно! Используйте на здоровье Вашего web-сайта.

Полный исходник с примером можно взять здесь!

Буду рад, если сообщите мне о результатах внедрения.

P.S. Скрипт прошел тестирование для InternetExplorer и Opera.

© Долгов Сергей 01.04.2001

 

[ В начало раздела ]


 

 

Все для web-дизана!!! Бард-Путеводитель Много Всего CGI-Гид. Лучшие скрипты... WDH - WebDesignHelp - CGI, JAVA, APPLETS, TOP100! Раскрутка, увеличение посещаемости и индекса цитируемости в поисковых системах.

© 2000-2002 Долгов Сергей

dolgov_sergei@mail.ru

X