Навигация с помощью стрелок

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Андрей Шитов

23 декабря 2005


Задача. Рассказать, как это сделано у нас.

На сайте www.artlebedev.ru по страницам портфолио, «Ководства», рутины и иллюстраторской рутины можно перемещаться с помощью клавиатуры, нажимая клавиши ← и →, удерживая Ctrl.

Что для этого требуется, в общих чертах понятно. Где-то в коде нужно спрятать адреса предыдущей и следующей страниц и «повесить» обработчик на нажатие клавиш.

Куда записать адреса? В общем-то, куда угодно. Воспользуемся тегами <link>, дополнив их идентификаторами:

<link rel="next" href="/portfolio/sokol/2005/" id="NextLink" />
<link rel="prev" href="/portfolio/samsung/megaded/" id="PrevLink" />
<script type="text/javascript" src="/svalka/navigate.js"></script>

Такой выбор попутно решил еще одну задачу — некоторые браузеры реагируют на эти теги, отображая дополнительные кнопки на панели навигации.

Осталось «повесить» обработчик на событие onkeydown:

document.onkeydown = NavigateThrough;

И ждать, пока не будет нажата одна из стрелок:

function NavigateThrough (event)
{
	. . .
	switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
	{
		case 0x25:
			link = document.getElementById ('PrevLink');
			break;
		case 0x27:
			link = document.getElementById ('NextLink');
			break;
	}
	if (link && link.href) document.location = link.href;	
}

События

Как работать с клавиатурными событиями, давно всем известно. Тем, кто предпочитает более понятный код, предлагаем выполнить задания на вакансию веб-технолога — 3.

Опера — исключение. Этот браузер передает управление обработчику события после того, как выполнит действие по умолчанию (комбинация Ctrl + стрелка в ней уже занята). Поэтому в Опере приходится нажимать не только Ctrl, но и Shift — такая трехклавишная комбинация соответствует навигации по ссылкам из тегов <link>.

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