
Многие наверняка уже встречали метод навигаций с помощью клавиатуры, а конкретно сочетания клавиш Ctrl + стрелочки влево/вправо. Подобный скрипт используется на многих популярных сайтах, например в поиске на Яндексе, Хабре или сайте студий Лебедева. Такой метод действительно является удобным, так как для постраничной навигаций не нужно использоваться мышь, достаточно одной клавиатуры.
Предлагаю сразу перейти к делу и разобраться с тем, как реализовать такое у себя на сайте:
1. Создаем index.html
[sourcecode lang=”html”]<html>
<head>
<script type="text/javascript" src="nav.js"></script>
<link rel="prev" href="page-1.html" id="NextLink" />
<link rel="next" href="page-3.html" id="PrevLink" />
</head>
<body>
<!– Содержание сайта –>
<a href="page-1.html">&amp;amp;amp;larr; Назад</a> + <b>Ctrl</b> + <a href="page-3.html">Вперед &amp;amp;amp;rarr;</a>
</body>
</html>
[/sourcecode]
2. Подключаем к нему яваскрипт, для этого создаем файл nav.js
[sourcecode lang=”javascript”]
document.onkeydown = NavigateThrough;
function NavigateThrough (event)
{
if (!document.getElementById) return;
if (window.event) event = window.event;
if (event.ctrlKey)
{
var link = null;
var href = null;
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 &amp;amp;amp;&amp;amp;amp; link.href) document.location = link.href;
if (href) document.location = href;
}
}
[/sourcecode]
3. Открываем наш файл в современном браузере и пробуем переключиться между страницами с помощью “горячих клавиш”.
PS: Те кто пользуется стандартным вариантом переключения страниц в WordPress, могут легко прикрутить скрипт к теме.