Перемещение по списку с помощью стрелок

 
+1
 
JavaScript
ava
Research | 25.01.2013, 17:12
Здравствуйте!
В общем, задача такова:
есть список подгужаемый с помощью ajax

<ul> 
 <li> 
 <p>El1</p> 
 </li> 
 <li> 
 <p>El2</p> 
 </li> 
 <li> 
 <p>El3</p> 
 </li> 
</ul>


Так вот, нужно сделать так, чтобы по элементам списка можно было передвигаться с помощью стрелок на клавиатуре.
Пожалуйста, дайте какое-нибудь простенькое решение. Спасибо всем =)
Kommentare (4)
ava
Aliance | 25.01.2013, 16:34 #
Пишем функцию, в которой будут бинды на keydown. В callback ajax-а ставим вызов этой функции (можно ставить по dom ready).

функция-биндер выглядеть будет примерно так:

function bindMoveKeys() {
    $(document).on('keydown', function(event) {
       if (event.ctrlKey) {
           switch (event.keyCode) {
               case 37: // <----
                   break;
               case 39: // ---->
                   break;
           }
       }
    });
}


Только не понятно, что значит передвигаться? Как это себе представляешь?
ava
Research | 25.01.2013, 16:45 #
при вводе слова для поиска в google (например), подгружаются совпадающие с этим словом результаты, по ним можно передвигаться стрелками вверх и вниз, далле выбрать нажав enter. нужно присваивать тому элементу списка на котором находишься, класс active например, для того, чтобы он подсвечивался. но как реализовать это - не знаю. 
ava
Research | 25.01.2013, 17:09 #
Никто не знает?
ava
Aliance | 25.01.2013, 17:11 #
Там это поведение активируется нажатием клавиши TAB. А дальше просто TAB+(UP/DOWN) добавляют свойству класс active, его контейнер через CSS понимает наличие этого класса и отображает либо скрывает иконку стрелочки. Enter же забиндить так же не проблема.

Вот коротенький пример, далеко не рабочий, но на мысли натолкнет.
http://jsfiddle.net/Aliance/TWW7h/
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden