Как включить навигацию с помощью клавиатуры для большого приложения - PullRequest
1 голос
/ 10 февраля 2010

У меня есть большой Asp.net (некоторые страницы Ajaxable, но не все), для которого я хочу активировать навигацию с клавиатуры.

Некоторые сочетания клавиш, выбранные для выполнения или вызова некоторых методов и функций или для отображения и скрытия элементов страницы. Эти комбинации более 50 клавиш.

Кроме того, пользователи должны иметь возможность изменить любой ярлык (в данный момент это не обязательно, но это необходимо сделать)

Так как мне включить навигацию с помощью клавиатуры для моего приложения?

1 Ответ

2 голосов
/ 10 февраля 2010

Вот пара помощников, которые я написал в jQuery для другого проекта. Может быть, вы можете использовать некоторые из них:

App = {
    doStuff : function() {
        // a custom action
    },
    attachKeyboard : function(map) {
        jQuery(document).bind('keydown', {map: map, scope: this}, this.keyNav);
    },
    detachKeyboard : function(map) {
        jQuery(document).unbind('keydown', this.keyNav);
    },
    keyNav : function(e) {
        var key = e.keyCode || e.which;
        var map = e.data.map;
        var scope = e.data.scope;
        var keymap = {
            UP: 38,
            DOWN: 40,
            LEFT: 37,
            RIGHT: 39,
            RETURN: 13,
            ESCAPE: 27,
            BACKSPACE: 8
        };
        for( var i in map ) {
            var k = i.toUpperCase();
            if ( keymap[k] ) {
                map[keymap[k]] = map[i];
            }
        }
        if (typeof map[key] == 'function') {
            map[key].apply(scope);
        }
    }
}

Используйте это так:

App.attachKeyboard({
    up: this.doStuff,
    down: function() {
        // some other action
    },
    16: function() {
        // do stuff when charcode 16 is pressed
    }
});

Если вы хотите изменить действия, вы можете просто отсоединить клавиатуру и заново связать ее:

App.detachKeyboard();
App.attachKeyboard({
    up: function() {
        // do stuff
    }
});
...