Question

我正在尝试将键盘导航添加到网站设计中，我一直在关注此Adding Keyboard Navigation tutorial by 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 plugin中，如果有人对如何做到这一点有任何想法？

这是他完成的代码：

$(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();
    }
  });
});

Answer 1

不确定你真正想做什么，但这是一个使用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');

将事件添加到scrollTo插件以滚动键盘导航

1 个答案: