將事件添加到scrollTo用於滾動鍵盤導航的插件

我試圖將鍵盤導航添加到網站設計，並且我一直在關注此Adding Keyboard Navigation tutorial by Remy Sharp，但似乎無法使其適應我的需求。將事件添加到scrollTo用於滾動鍵盤導航的插件

我想將此代碼添加到scrollTo插件，因此當用戶單擊向上或向下鍵時，頁面將滾動到下一個或上一個部分。

這是雷米越過代碼：

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

來源

2012-06-19 Cameron

不知道的是你真正想做的事情，但這裏是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-19 09:56:32

嗨靈光，對不起，我推錯在我的最後評論進入。感謝您的答覆。這真是太神奇了，它幾乎就是我正在尋找的東西，我之前沒有聽說過keyboardJS（即使在搜索解決方案的2天后）。唯一的問題是，如果用戶雙擊錯誤箭頭鍵兩次，它會跳轉一點點，有時它不會註冊滾動功能，而只是像默認的瀏覽器滾動一樣滾動，但除此之外，它是現貨。感謝你的分享。我仍然有興趣聽到有沒有其他解決方案。 – Cameron

沒問題:)我編輯了我的代碼。告訴我它現在是否更好用 –

非常感謝您花時間做到這一點，Emmanuel。對此，我真的非常感激。我真的很希望我不會在這裏推動我的運氣，但實現左右鍵也有多容易？例如，如果我按下右鍵，頁面會向下滾動，左鍵會向上滾動？ – Cameron

將事件添加到scrollTo用於滾動鍵盤導航的插件

回答

相關問題