javascript - 如何覆盖 Kendo UI ListView 的默认键盘导航

Question

我正在尝试覆盖 Kendo ListView 的默认键盘导航。

默认情况下，Kendo 键盘导航会区分所选项目和当前项目。键盘导航将当前项目与所选项目分开移动。所选项目突出显示，当前项目有边框。

我希望所选项目与当前项目一起移动。

我尝试禁用 Kendo 按键处理程序并将其替换为我自己的处理程序。

$('#listView').off('keydown.kendoListView');
$('#listView').on('keydown.kendoListView', function (e) {
    var listView = $('#listView').data('kendoListView');
    switch (e.which) {
        case 40:
            var newSelection = listView.select().next();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        case 38:
            var newSelection = listView.select().prev();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        }
});

这在当前项和选定项相互匹配时成功，但滚动不对齐。按下似乎可以将 ListView 滚动多个元素。所以当前项目最终在 View 之外。

我尝试过的一个例子是: http://jsfiddle.net/blutter/ULLu8/19/

有没有办法解决滚动问题？或者更改 Kendo Listview 的键盘导航的更好方法？

Answer 1

keydown 处理程序需要返回 false 以防止额外的滚动。

所以处理程序是:

  $('#listView').on('keydown.kendoListView', function (e) {
      var listView = $('#listView').data('kendoListView');
      switch (e.which) {
          case 40:
              var newSelection = listView.select().next();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
          case 38:
              var newSelection = listView.select().prev();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
      }
      return false;
  });

参见 http://jsfiddle.net/blutter/ULLu8/23/对于工作 fiddle