Удобная навигация с помощью JavaScript

Янв.24.2010     Web-программирование > JavaScript     (0)

На днях занимался созданием презентации. В силу нескольких причин, делал ее в виде последовательно соединенных между собой html-страниц. В навигации между страницами были использованы кнопки "вперед" и "назад", расположенные снизу, чтобы не забирать важное место вверху страницы. Но, как часто бывает, некоторые страницы вышли большие по размеру и полностью не вмещались на экране. То есть получилось так, что для того, чтобы перейти на другую страницу, нужно перемотать ее вниз и там кликнуть мышкой по кнопке "вперед". Немного неудобно, правда? Нужно было найти решение, которое бы улучшило удобство в перемещении по страницам презентации (usability). Вспомнилась популярная фича с навигацией по страницам с помощью клавиш Ctrl + Вправо для перехода на следующую страницу или Ctrl + Влево для перехода на предыдущую соответственно.

Итак, результат более или менее визуализировался, осталось только реализовать его. Начал искать в Гугле. Но на мои запросы типа "js ctrl клавиша вправо", "js следующая страница" ничего полезного не нашлось. Пришлось идти на сайт, на котором я видел это решение – сайт студии Артемия Лебедева.
[Кстати, когда я по-памяти набрал адрес сайта Лебедева, – ошибся и набрал через дефис (art-lebedev.ru вместо artlebedev.ru), – меня перебросило на сайт компании занимающейся изготовлением полов. Как мог первый веб-дизайнер рунета допустить такую ошибки – не зарегистрировать подобное доменное имя. (Хотя кто знает, может это такая накрутка посещений сайта от его студии!?) Ок, я отклонился от темы.

Итак, решение (как у Артемия Лебедева). В html-страницы подключается JS-файл с нужным скриптом. Плюс в заголовке страницы (между и ) нужно прописать адреса предыдущей и последующей страниц (в примере мы находимся на странице page-2.html; предварительная и следующая страницы – это page-1.html и page-3 . html соответственно). Вообще все должно выглядеть так (в простейшем случае):