Question

我正在尝试创建一个原型，使用表格布局和导航测试电视界面，只需使用箭头键（模拟D pad）。我发现这个例子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

    }
});

Answer 1

所以我用这段代码添加了上下按键：

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。

希望这有用！

使用箭头键导航时跳过表格单元格

1 个答案: