Меню с выделением (часть 2) (скачать)

      Перед тем, как вы начнете читать этот материал, рекомендую ознакомиться с предыдущей статьей, так как все изложенное ниже является своего рода продолжением.
      После публикации моей статьи "Меню с выделением" я получил письма, в которых меня просили о помощи. Дело в том, что скрипт который я рассматривал всем хорош, пока имеешь дело с несколькими файлами (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 +'&nbsp;</font></b>'); 
else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a>&nbsp;</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
Сайт независимого дизайнера



© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин