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

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Андрей Шитов
(ash@design.ru)

# Навигация с помощью стрелок 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>`.

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

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |