Пропуск ячеек таблицы при навигации с помощью клавиш со стрелками

Question

Пропуск ячеек таблицы при навигации с помощью клавиш со стрелками

0

Я пытаюсь создать прототип для тестирования интерфейса телевизора с использованием макета таблицы и навигации только с помощью клавиш со стрелками (имитировать панель D). Я нашел этот пример http://jsfiddle.net/BdVB9/, который позволяет навигация с использованием всех четырех ключей, но я также пытаюсь включить возможность применения класса к ячейке, которая заставит навигацию пропускать ячейки без этого класса. Я создал что-то, что пропускает, используя стрелки влево и вправо, но наклоняю, похоже, вверх и вниз.

Посмотреть код здесь: http://jsfiddle.net/matternst/Hk3Pu/

Любая помощь будет принята с благодарностью.

var index = 0;
$(document).keydown(function(e) {

    var rows = $('#navigate tr').length;

    if (e.keyCode === 39) { //move left or wrap
        index = (index + 1 >= $('td.can_be_selected').length) ? $('td.can_be_selected').length - 1 : index + 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }
    if (e.keyCode === 37) { // move right or wrap
        index = (index == 0) ? 0 : index - 1;
        $('td.can_be_selected').removeClass('selected');
        $('td.can_be_selected:eq(' + index + ')').addClass('selected');
        return false;
    }

    if (e.keyCode === 38) {  // move up

    }
    if (e.keyCode === 40) { // move down

    }
});

user3329823 19 фев. 2014, в 22:11

Источник

0

Я не знаю, что у меня достаточно информации, чтобы ответить на этот вопрос, поэтому я сейчас прокомментирую. Каково желаемое поведение, когда пользователь находится в верхней левой ячейке и нажимает «вниз» (пытаясь перейти к затененной ячейке)? Куда они идут?
snollygolly 19 фев. 2014, в 20:24
0

Получите строку, получите ячейку, если она не работает, возьмите следующий ряд и продолжайте. Простая петля.
epascarello 19 фев. 2014, в 20:40
0

Спасибо за ответ, идеальное поведение для примера ссылки Jsfiddle - если вы находитесь в верхней левой ячейке и нажимаете стрелку вниз, вы пропускаете серую ячейку внизу и сосредотачиваетесь на белой ячейке в третьем ряду вниз. Такое же поведение, как если бы вы нажали стрелку вправо, и она перепрыгивает через две серые ячейки и фокусируется на четвертой белой ячейке. По сути, я хочу пропустить любые ячейки без перемещения класса в любом направлении.
user3329823 20 фев. 2014, в 03:00

Показать ещё 1 комментарий

Теги:

javascript

jquery

navigation

keyboard

1 ответ

Ещё вопросы

Я не знаю, что у меня достаточно информации, чтобы ответить на этот вопрос, поэтому я сейчас прокомментирую. Каково желаемое поведение, когда пользователь находится в верхней левой ячейке и нажимает «вниз» (пытаясь перейти к затененной ячейке)? Куда они идут?
Получите строку, получите ячейку, если она не работает, возьмите следующий ряд и продолжайте. Простая петля.
Спасибо за ответ, идеальное поведение для примера ссылки Jsfiddle - если вы находитесь в верхней левой ячейке и нажимаете стрелку вниз, вы пропускаете серую ячейку внизу и сосредотачиваетесь на белой ячейке в третьем ряду вниз. Такое же поведение, как если бы вы нажали стрелку вправо, и она перепрыгивает через две серые ячейки и фокусируется на четвертой белой ячейке. По сути, я хочу пропустить любые ячейки без перемещения класса в любом направлении.

Blundering Philosopher · Answer 1 · 2014-03-30T04-16-00.000Z

Поэтому я добавил клавиши "вверх" и "вниз" с помощью этого кода:

if (e.keyCode === 38) {  // move up
    index -= columns;
    if (index < 0) {
        index += maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index < 0) {
            // wrap both ways:
            index += maxCellIndex;
        } else {
            index -= columns;
        }
    }
}
if (e.keyCode === 40) { // move down
    index += columns;
    if (index >= maxCellIndex) {
        index -= maxCellIndex;
    }
    while( !$('#navigate tr td:eq(' + (index) + ')').hasClass('can_be_selected') ) {
        if (index >= maxCellIndex) {
            // wrap both ways:
            index -= maxCellIndex;
        } else {
            index += columns;
        }
    }
}
$('#navigate tr td:eq(' + index + ')').addClass('selected');

Заметки:

Я также изменил код для перемещения влево/вправо.
Я вижу, как влево/вправо выбранный блок будет переноситься в следующую строку [вверх/вниз], но я не добавлял это для увеличения/уменьшения. Это можно сделать легко, поэтому дайте мне знать, что вы хотите.
Вот обновленный Fiddle.

Надеюсь, это полезно!