Локальная навигация «вперёд-назад»

Дурацкое название у заметки, правда? Ничего иного не придумалось, пусть так живёт.

А суть в следующем — создать с помощью JavaScript подобную навигацию:

Другими словами, у нас есть некий набор ссылок, и мы хотим сделать удобное перемещение между предыдущей и следующей ссылками. Разумеется, оптимально было бы использовать SSI или PHP, но на одном сайте я был ограничен только клиентским программированием, в результате чего вышло следующее:

/*
written by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru
*/

// двумерный массив ссылок, «участвующих» в навигации
var a = new Array();
// формат элемента массива: "текст", "ссылка", "title"
a[0] = new Array("Без даты", "/nodate.htm", "N/A");
a[1] = new Array("Раннее", "/early.htm", "до Р.Х.");
a[2] = new Array("1998", "/1998.htm", "18 лет");
a[3] = new Array("1999", "/1999.htm", "19 лет");
a[4] = new Array("2000", "/2000.htm", "20 лет");
a[5] = new Array("2001", "/2001.htm", "21 год");
a[6] = new Array("2002", "/2002.htm", "22 года");

// заносим в переменную path нужную нам часть адреса текущей страницы
var path = location.pathname;
var link_item = null;
// определяем, стоит ли нам вообще выводить навигацию на странице (если текущей страницы нет в массиве ссылок (a) — не нужно)
var curr_sect_index = getCurrSectIndex(path);

function getCurrSectIndex(curr_path){
    for (var i = 0; link_item = a[i]; i++){
        if (curr_path.search(link_item[1]) != -1) return i;
    }
    return null;
}

// вспомогательная ф-ция, составляющая из параметров HTML ссылку
function fnLink(txt, a_href, a_title, a_class){
    var html = "<a";
    html += (a_href) ? " href=\"" + a_href + "\"" : "";
    html += (a_title) ? " title=\"" + a_title + "\"" : "";
    html += (a_class) ? " class=\"" + a_class + "\"" : "";
    html += (">" + txt + "</a>");
    return html;
}

// основная ф-ция, выводящая на экран навигацию
function MkPathNav(){
    if (curr_sect_index == null) return;
    with (document){
        write("<div class=\"path\">");
        if (a[curr_sect_index - 1]) write(fnLink("&laquo;", a[curr_sect_index - 1][1], a[curr_sect_index - 1][0] + " (" + a[curr_sect_index - 1][2] + ")", "") + "&nbsp;");
        write("<span class=\"sect\">" + a[curr_sect_index][0] + "</span>");
        if (a[curr_sect_index + 1]) write("&nbsp;" + fnLink("&raquo;", a[curr_sect_index + 1][1], a[curr_sect_index + 1][0] + " (" + a[curr_sect_index + 1][2] + ")", ""));
        write("</div>");
    }
}

Если вы захотите использовать приведённый код, вам нужно поменять, прежде всего, элементы массива a на свои, а также определить в таблице стилей CSS классы div.path, div.path a и span.sect.

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

Have fun.