Тема: Перелистывание, как на Яндексе, с помощью Ctrl+стрелочка
Перелистывание клавиатурой можно добавить практически к любой листалке, надо только добавить пару id к ссылкам и небольшую функцию JavaScript.
Имеем примерно такой HTML код листалки на ссылках следующая/предыдущая страница.
<div>
<span>Страницы:</span>
<a href="/test/test.php?page=1" id="page_previous">? предыдущая</a>
<a href="/test/test.php?page=3" id="page_next">следующая ?</a>
</div>
Важным является только определение идентификаторов ссылок [mono]id="page_previous"[/mono] для предыдущей страницы, и [mono]id="page_next"[/mono] для следующей страницы.
Создаем функцию JavaScript, которая будет отвечать за перехват нажатия клавиш и перевод пользователя на требуемую страницу.
function Page_onkeydown(event) {
var id = false;
// Событие window.event необходимо для совместимости с браузером Internet Explorer.
event = event || window.event;
// Помещаем в переменную key код нажатой клавиши.
var key = event.keyCode;
// Проверяем нажата ли клавиша Ctrl.
if (event.ctrlKey) {
// Помещаем в переменную tag название активного тега, того в котором находится курсор.
// Свойство event.srcElement необходимо для совместимости с браузером IE.
var tag = (event.target || event.srcElement).tagName;
// Проверяем где находится курсор. Если в текстовом поле, то перелистывать нельзя,
// чтобы не портить перемещение по тексту, где тоже используется сочетание клавиш Ctrl+стрелочка.
if (tag != 'INPUT' && tag != 'TEXTAREA') {
// Код клавиши 37 - значит нажата стрелочка влево.
if (key == 37) {
// Помещаем в переменную id ссылку на тег <a> отвечающий за переход на предыдущую страницу.
id = document.getElementById('page_previous');
}
// Код клавиши 39 - значит нажата стрелочка вправо.
if(key == 39) {
// Помещаем в переменную id ссылку на тег <a> отвечающий за переход на следующую страницу.
id = document.getElementById('page_next');
}
// Проверяем существует ли объект.
if (id) {
// Осуществляем переход по ссылке указанной в свойстве href.
// Это и есть цель данной функции, она осуществляет переход.
location.href = id.href;
}
}
}
}
Осталось только заставить функцию работать. Делается это с помощью перехвата нажатия клавиш [mono]document.onkeydown[/mono]. Обратите внимание, что запускать функцию надо после вывода HTML кода листалки. Конечный вид HTML кода с запуском функции [mono]Page_onkeydown[/mono] будет таким.
<div>
<span>Страницы:</span>
<a href="/test/test.php?page=1" id="page_previous">? предыдущая</a>
<a href="/test/test.php?page=3" id="page_next">следующая ?</a>
</div>
<script type="text/javascript">
<!--
document.onkeydown = Page_onkeydown;
//-->
</script>
Ничего сложного.
Пример реализации можете посмотреть на нашей странице поиска.