Выбор клавиатуры с помощью jquery - PullRequest
Новая
       14

Выбор клавиатуры с помощью jquery

0 голосов
/ 15 января 2010

У меня есть набор вложенных

  • , и я хотел бы иметь возможность иметь класс hover / selected на
  • и использовать клавиши вверх и вниз для выбора вверх и вниз по
  • s .. однако они вложенные и при необходимости нужно перепрыгнуть через

Ответы [ 2 ]

1 голос
/ 15 января 2010

Вы уже что-нибудь пробовали?

Без конкретного решения, вот несколько вещей, которые помогут вам.

1) Привязать событие нажатия клавиши (например, к документу) 

$(document).keydown(MyKeyupFunc);

2) Захватить нажатие клавиши вверх / вниз: 

function MyKeyupFunc(event){

    switch (event.keyCode) {
        case 38: //keyup
            //key down code
            break;
        case 40: //keydown
            //key up code
            break;
        default:
            return;
    }

    //stop event 
    event.preventDefault();
    event.stopPropagation();
    if ($.browser.msie) {
        event.originalEvent.keyCode = 0;
        event.originalEvent.cancelBubble = true;
        event.originalEvent.returnValue = false;
    }
}

3) Код вашего набора / нажатия клавиш будет включать в себя поиск того, что выбрано, и что является следующим / предыдущим элементом. Возможно, вам придется проверить, что на предмете также есть класс наведения.

Вам понадобится кое-что из выбора элементов навигации, поэтому вам нужно что-то, что jQuery сможет выбрать. Предложите добавить пустой CSS class="navigable" для каждого, и таким образом вы можете выбрать все элементы, подлежащие навигации по клавиатуре: 

var $navListitems = $("li.navigable");

Факторинг вашего видимого требования: 

var $navListitems = $("li.navigable:visible");

4) Может быть, подумайте о сортировке, проверьте следующую ссылку

http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/

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

Если у вас есть конкретные вопросы, я уверен, что люди будут рады помочь, если вы отправите сообщение обратно на форум: -)

0 голосов
/ 15 января 2010

Вы можете сделать это с чистым HTML, если используете радио-кнопки. 

<ul>
    <li class='cat'>cat 1
        <ul>
        <li><input type='radio' name='n' id='n1'><label for='n1'>item 1</label></input></li>
        <li><input type='radio' name='n' id='n2'><label for='n2'>item 2</label></input></li>
        <li><input type='radio' name='n' id='n3'><label for='n3'>item 3</label></input></li>
        <li><input type='radio' name='n' id='n4'><label for='n4'>item 4</label></input></li>
        </ul>
    </li>
    <li class='cat'>cat 2
        <ul>
        <ul>
        <li><input type='radio' name='n' id='n5'><label for='n5'>item 5</label></input></li>
        <li><input type='radio' name='n' id='n6'><label for='n6'>item 6</label></input></li>
        <li><input type='radio' name='n' id='n7'><label for='n7'>item 7</label></input></li>
        <li><input type='radio' name='n' id='n8'><label for='n8'>item 8</label></input></li>
        </ul>
        <ul class='subcat'>
            <li class='cat'>Cat 3
                <ul>
                <li><input type='radio' name='n' id='n9'><label for='n9'>item 9</label></input></li>
                <li><input type='radio' name='n' id='n10'><label for='n10'>item 10</label></input></li>
                <li><input type='radio' name='n' id='n11'><label for='n11'>item 11</label></input></li>
                <li><input type='radio' name='n' id='n12'><label for='n12'>item 12</label></input></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class='cat'>
        cat 4
        <ul>
        <li><input type='radio' name='n' id='n13'><label for='n13'>item 13</label></input></li>
        <li><input type='radio' name='n' id='n14'><label for='n14'>item 14</label></input></li>
        <li><input type='radio' name='n' id='n15'><label for='n15'>item 15</label></input></li>
        <li><input type='radio' name='n' id='n16'><label for='n16'>item 16</label></input></li>
        </ul>
    </li>
</ul>
...