Часто мне доводилось слышать такие вопросы:
"Есть несколько страниц с одинаковым меню. Как сделать так, чтобы при переходе
на любую страницу, соответствующая этой странице ссылка выделялась и писалась
обычным текстом, а не ссылкой?" Собственно, это делается очень просто с помощью
JavaScript. Весь скрипт будет размещаться во внешнем файле и занимать не более
пяти строк.
Итак, для начала мы имеем некоторое количество однотипных
страниц, с одинаковым меню. Например, какой-нибудь каталог или рейтинг. Для нормальной
работы нужно все страницы назвать по порядку именами содержащими числа. Самый
простой пример, берем и называем все однотипные страницы так: 1.htm, 2.htm, 3.htm
и так далее. Но я для примера возьму следующие обозначения: page1.htm, page2.htm
и page3.htm. Всего у меня будет три страницы.
Скрипт, отображающий меню на этих страницах, будет выглядеть
так:
var numb;
function menu (numb) {
document.write(" <br>Страницы: ");
for(i=1;i<4;i++)
{
if( i == numb )
document.write('<b><font size=+1>'+ i +' </font></b>');
else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');
} }
Переменная "numb" в этом скрипте нужна для
обозначения той страницы на которой мы сейчас находимся. Этот скрипт помещаем
в файл. Назовем его к примеру menu.js. Все, про этот скрипт забыли и переходим
к нашим страницам на которых должно быть меню. В самом начале документа между
тэгами <head> и </head> нужно написать строку, которая говорила бы
обработчику, из какого файла нужно брать скрипт. Пишем:
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js">
</SCRIPT>
Теперь одинаковое меню будет на каждой странице.
Для того чтобы весь наш скрипт работал, в него необходимо передать информацию
о том, какая страница в данный момент загружена. Эту информацию можно передать
двумя способами. Первый - наиболее простой и примитивный - все вписывается в ручную.
Второй - более тернистый и сложный - все определяет скрипт. Лично мне больше нравится
первый (простой) способ. В нем все просто до предела и проблем никаких не возникает.
Мы просто берем и дописываем к предыдущей строке
<SCRIPT>numb=1;</SCRIPT>
Соответственно, для второй страницы numb нужно присвоить значение
2, и тд.
Теперь в том месте, где у нас должно находится меню вписываем
<script>menu (numb); </script>
Все.
В конечном виде в каждый файл нужно дописать эти строки
<head>
…
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
<SCRIPT>numb=1;</SCRIPT>
…
</head>
где переменной numb присваивается значение в зависимости от имени файла и строку
<script>menu (numb); </script>
которая во всех файлах одинакова. То есть получается, что нам в каждый файл нужно
прописать по три строки.
Если в дальнейшем число страниц увеличится, то мы просто в файле menu.js увеличиваем
число до которого должен доходить цикл. Это строка
for(i=1;i<4;i++)
Если число страниц увеличивается, то вместо 4 нужно писать число равное числу
страниц плюс один.
В принципе, меня этот скрипт вполне устраивает, но можно его доработать, чтобы
во все файлы вписывать абсолютно одинаковые строки и не менять значение numb в
ручную. Правда скрипт значительно увеличится в размерах.
Итак, усложняем скрипт. Причем хочу заметить,
что в этом случае не получится написать абсолютно универсальный скрипт. И вот
почему. Скрипт будет отличаться в зависимости от того, как у нас названы файлы
и в зависимости от того, используются ли фреймы на нашем сайте. Предположим, что
мы не используем на сайте фреймы и файлы у нас названы так как мы приняли вначале.
Тогда в каждый файл пишем
<head>
…
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
…
</head>
<body>
…
<script>menu (); </script>
…
</body>
Зато скрипт, находящийся во внешнем файле, немного усложнится и будет выглядеть
следующим образом:
var numb;
var st;
function menu ( ) {
st = parent.location.pathname;
numb = st.substring ( st.lastIndexOf ( "e" )+1, st.length - 4 );
document.write(' <br> Страницы: ');
for(i=1;i<4;i++)
{
if ( i == numb)
document.write('<b><font size=+1>'+ i +'
</font></b>'); else
document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> </b>');
}
}
Напомню еще раз, что этот скрипт не универсален.
Пояснять его я не буду. Кто разбирается в JavaScript, тот сам поймет что к чему
и сможет переделать его под свои нужды, а всем остальным предлагаю использовать
первый (более простой) скрипт.
Примечание:
Если у вас под рукой нет справочника JavaScript, то ниже я перечисляю использованные
в скрипте методы, свойства и объекты.
1. location - объект. Полная информация об URL текущего документа.
Объект location используется для определения URL любого активного документа, включая
документы в других окнах или кадрах навигатора. Если объект window не указан,
подразумевается текущее окно. Каждое свойство объекта location содержит отдельную
часть URL. Шесть частей URL отражены в объекте location:
protocol://hostname:port/pathname search#hash
2. substring - метод. Возвращает часть строкового объекта в зависимости
от двух индексов.
StringName.substring(index1, index2)
3. lastIndexOf - метод. Возвращает позицию символа или подстроки
в строке, начиная поиск с конца.
4. length - свойство. Целое число, показывающее длину или размер
соответствующего свойства объекта.
Автор: Jimy SHADE
Сайт независимого
дизайнера