Сочетание клавиш для навигации по сайту - PullRequest
Новая
       15

Сочетание клавиш для навигации по сайту

1 голос
/ 08 января 2011

Я создаю среду приложения PHP, в которой все страницы создаются динамически, например:

  • domain.com / 1 /
  • domain.com / 2 /
  • domain.com / 3 /
  • и т. Д. *

Теперь я хочу добавить поддержку, чтобы пользователи могли просто использовать клавиатуру для навигации по сайту.(Возможно, нажимаются ← и → клавиши клавиатуры)

Это что-то выполнимое?Если да, что мне нужно использовать?

1 Ответ

1 голос
/ 08 января 2011

Вам определенно потребуется использовать JavaScript для захвата всех событий keydown (обратите внимание, клавиши со стрелками не будут запускать событие нажатие клавиши ). Например, Ctrl + 2 перейдет на страницу / 2, Ctrl + 3 перейдет на страницу / 3.

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

Выполните поиск по этому событию, чтобы начать. В приведенном ниже примере вводится клавиша ввода 

   if(event.keyCode == 13) {
       // do stuff
   }

Вот список кодов клавиш: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

Чтобы создать события для этих ключей, я бы предложил начать с создания событий для них. Для этого примера вам понадобится jQuery, хотя в чистом JavaScript есть способы сделать это: 

// bind keydown events to the window
$(document).keydown(function(event) {
    if (event.which == 37) {  
       // left arrow - run your code to change back a page
       alert('left');
    } else if(event.which == '39') {
       // right arrow - run code to move forward a page
       alert('right');
    }
 });

Таблица ключевых событий по браузеру и ключам: http://www.quirksmode.org/js/keys.html

Список кодов клавиш: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

...