1

Тема: Перелистывание, как на Яндексе, с помощью 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>

Ничего сложного. smile
Пример реализации можете посмотреть на нашей странице поиска.

ВКонтакте Facebook Twitter