Перед тем, как вы начнете читать этот материал,
рекомендую ознакомиться с предыдущей статьей,
так как все изложенное ниже является своего рода продолжением.
После публикации моей статьи "Меню с выделением" я получил
письма, в которых меня просили о помощи. Дело в том, что скрипт который я рассматривал
всем хорош, пока имеешь дело с несколькими файлами (10-20). А если попытаться
использовать его для создания меню к 30 и более файлам, то сталкиваешься с рядом
проблем. А именно, скрипт пишет все номера страниц в одну строку и при большом
количестве страниц получается весьма длинная строка, которая в конечном итоге
перестает помещаться в экран. Я усовершенствовал этот скрипт и теперь его можно
использовать при ЛЮБОМ количестве ссылок.
Я решил, что самым удобным является такое меню, когда кроме
текущей страницы отображаются ссылки на 5 страниц назад и на 5 страниц вперед.
Таким образом, появляется возможность двигаться как вперед по списку, так и назад,
причем можно перескакивать сразу через несколько ссылок. То есть, итогом работы
скрипта будет являться фрагмент меню отображаемый в документе с возможностью перемещения
по ссылкам.
Изначально скрипт меню из файла menu.js выглядел таким образом:
var numb;
function menu (numb) {
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" служит для
хранения номера текущей страницы.
Нам понадобятся еще дополнительные переменные. Переменная
"х" для хранения числа равного количеству ссылок, которые мы хотим видеть сзади
и впереди от текущей. Например, если х = 5, то в меню будет видно пять предыдущих
ссылок и пять последующих. Надеюсь, вы поняли, что я хотел сказать.
Переменные "a" и "b" для хранения в них номеров первой и
последней отображаемых ссылок. И, наконец, константа "d", которая равна общему
числу ссылок (например у нас будет 40 ссылок - d = 40). После добавления новых
страниц ее значение нужно каждый раз менять в скрипте.
Все эти переменные вписываем вместе с "numb"
var numb;
var a,b;
var d=40;
var x=5;
Теперь переходим к изменению самой функции.
Сначала нужно определить пределы в которых будет ограничено наше меню. Делаем
так:
a = eval(numb) - x;
b = eval(numb) + x;
if(a<1) { b = b + (1 - a); a = 1; }
if(b>d) { a = a - (b - d); b = d; }
Итогом этих четырех строк является присвоение
переменной "а" значения первой отображаемой ссылки, а переменной "b" значения
последней отображаемой ссылки. Теперь, когда мы определили в каких пределах нужно
отображать фрагмент меню, займемся непосредственно написанием кода для формирования
меню:
for(i=a;i<b+1;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>'); }
Если использовать скрипт в таком виде, то
меню будет выглядеть так (для 20-ой страницы):
15 16 17 18 19 20 21 22 23 24 25
Здесь все номера страниц кроме номера 20 будут ссылками,
а сам номер 20 - обычным увеличенным текстом.
Мы, находясь на 20-ой странице, можем переместиться как вперед
так и назад на одну или несколько (в этом случае не больше пяти) страниц. В принципе,
в таком виде этот скрипт уже готов к употреблению, но можно сделать его более
удобным. Например, добавить кнопки перемещающие на самую первую и на самую последнюю
страницу.
<< 15 16 17 18 19 20
21 22 23 24 25 >>
Теперь, нажав на ссылку "<<" мы переместимся на первую
страницу, а если нажмем на ">>", то на последнюю.
И в конечном итоге, чтобы меню выглядело таким образом, скрипт
(menu.js) должен быть следующим:
var numb;
var a,b;
var d=40;
var x=5;
function menu (numb) {
a = eval(numb) - x;
b = eval(numb) + x;
if(a<1) { b = b + (1 - a); a = 1; }
if(b>d) { a = a - (b - d); b = d; }
if(numb > 1) document.write('<b><a href="page1.htm">
<<</a></b>'); else
document.write('<b><<</b>');
for(i=a;i<b+1;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>');
}
if(numb<d) document.write('<b><a href="page' + d + '.htm">
>></a></b>'); else
document.write('<b>>></b>');
}
Ну и, конечно же, как и ранее, в каждый
файл содержащий меню нужно вписывать строки:
<head>
…
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js">
</SCRIPT>
<SCRIPT>numb=1;</SCRIPT>
…
</head>
и в том месте где вы хотите видеть меню строку
<script>menu (numb); </script>
P.S. Не забывайте после добавления каждого нового файла изменять
в скрипте константу "d" !!!
Автор: Jimy SHADE
Сайт независимого
дизайнера