Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Перемещение по списку с помощью стрелок

Автор: Research 25.1.2013, 16:12

Здравствуйте!
В общем, задача такова:
есть список подгужаемый с помощью ajax

Код


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

Так вот, нужно сделать так, чтобы по элементам списка можно было передвигаться с помощью стрелок на клавиатуре.
Пожалуйста, дайте какое-нибудь простенькое решение. Спасибо всем =)

Автор: Aliance 25.1.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;
           }
       }
    });
}

Только не понятно, что значит передвигаться? Как это себе представляешь?

Автор: Research 25.1.2013, 16:45

при вводе слова для поиска в google (например), подгружаются совпадающие с этим словом результаты, по ним можно передвигаться стрелками вверх и вниз, далле выбрать нажав enter. нужно присваивать тому элементу списка на котором находишься, класс active например, для того, чтобы он подсвечивался. но как реализовать это - не знаю.

Автор: Research 25.1.2013, 17:09

Никто не знает?

Автор: Aliance 25.1.2013, 17:11

Там это поведение активируется нажатием клавиши TAB. А дальше просто TAB+(UP/DOWN) добавляют свойству класс active, его контейнер через CSS понимает наличие этого класса и отображает либо скрывает иконку стрелочки. Enter же забиндить так же не проблема.

Вот коротенький пример, далеко не рабочий, но на мысли натолкнет.
http://jsfiddle.net/Aliance/TWW7h/