2

サイトのデザインにキーボードナビゲーションを追加しようとしています。RemySharpによるこのキーボードナビゲーションの追加チュートリアルに従っていますが、ニーズに合わせることができないようです。

このコードを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/

2 つのパラメーターを微調整できます。

//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 に答える