2

我正在尝试将键盘导航添加到网站设计中，并且我一直在关注Remy Sharp 的添加键盘导航教程，但我似乎无法使其适应我的需求。

我想将此代码添加到 scrollTo 插件，以便当用户单击向上或向下键时，页面将滚动到下一个或上一个部分。

这是 Remy 的代码：

$(window).keyup(function (event) { 

            if(event.keyCode == 40) { //down key
            $('#nav-bar #nav li.current').parent().prev().find('a').click();    
            } else if (event.keyCode == 38) { //up key
              $('#nav-bar #nav li.current').parent().next().find('a').click()
            }
        });

我已经针对我的 HTML 标记对其进行了调整，并且我将使用向上和向下箭头键，就像他向左和向右一样，但除此之外，它与他的几乎相同。在他的版本中，他将它添加到一个名为 codaSlider 的插件中，我想知道是否可以将它添加到我拥有的scrollTo 插件中，是否有人对如何做到这一点有任何想法？

这是他完成的代码：

$(document).ready(function () {
  $('#coda-slider-1').codaSlider();

  $('body').keyup(function (event) {
    var direction = null;

    // handle cursor keys
    if (event.keyCode == 37) {
      // slide left
      direction = 'prev';
    } else if (event.keyCode == 39) {
      // slide right
      direction = 'next';
    }

    if (direction != null) {
      $('ul a.current').parent()[direction]().find('a').click();
    }
  });
});
4

1 回答 1

3

不确定您真正想要做什么，但这里有一个使用 keyboardJS 和 scrollTo jquery 插件的示例：

http://jsfiddle.net/Raildecom/TwJAM/

告诉我它是否符合您的需求！

编辑 ：

这是一个带有节流功能的新版本：http: //jsfiddle.net/Raildecom/TwJAM/4/

您可以调整两个参数：

//Handle keyDown events throttling
//Will execute one event every 2sec when the user hold the key
var throttleKeyDown = 2000;

//Handle KeyUp events throttling
//Will wait 0.3sec after the user release the key to avoid "double click" effect
var throttleKeyUp = 300;

//Parent node. Doesn't have to be ul
var node = $('ul');
于 2012-06-19T09:56:32.680 回答