ページの移動にショートカットキーを追加

JavaScript, Web Add comments

Amazonに倣って、BookFind.jpでも「前のページ」と「次のページ」の移動に、キーボード・ショートカットを割り当ててみました。

洋書のカテゴリをブラウズ中に、「前のページ」に戻る場合にはPキーを2回、「次のページ」に進む場合はNキーを2回押と、リンクをクリックすることなくページを移動できます。

アマゾンのサイトでも重宝している機能で、こちらではjQueryを利用しました。Internet Explorerでイフェクトが綺麗に出ないのが、ちょっと残念なところ。

3 Responses to “ページの移動にショートカットキーを追加”

  1. RUF Says:

    Jqueryベースで、ショートカットキーの実装方法を調べているうちに、ここにたどり着きました。BookFind.jpのサイトにてソースを拝見させていただいたのですが、私の技量ではどのように「前のページ」、「次のページ」のリンクにキーバインドを設定しているのか分かりませんでした。

    ※aタグにidを付与しているようではないような…。分かりませんでした。

    よろしければ手法をご教示いただければと思います。また実装方法を説明しているサイトなどありましたら、ご紹介いただければと思います。

    どうぞよろしくお願い致します。

  2. naotaka Says:

    こんな感じでdocumentにショートカットキーをbindしています。

    Amazon.comで使われている方法をjQueryに書き直した感じです。jQueryの使い方は、『jQuery in Action』で覚えました。

    ご参考になれば幸いです。

    [HTML]

    >div class="pager"<
    <div class="pager">
        <div class="pagination"><ul><li><a href="/browse/jp/87444011/1">« 前のページ</a></li><li><a href="/browse/jp/87444011/1">1</a></li><li class="current">2</li><li><a href="/browse/jp/87444011/3">3</a></li><li><a href="/browse/jp/87444011/4">4</a></li><li><a href="/browse/jp/87444011/5">5</a></li><li><a href="/browse/jp/87444011/6">6</a></li><li><a href="/browse/jp/87444011/7">7</a></li><li><a href="/browse/jp/87444011/8">8</a></li><li>...</li><li><a href="/browse/jp/87444011/400">400</a></li><li><a href="/browse/jp/87444011/3">次のページ »</a></li></ul></div>
    </div>
    
    <script type="text/javascript">
        registerDoubleKeyHandler('80', 'keyup', 'prevPage');
        registerDoubleKeyHandler('78', 'keyup', 'nextPage');
    </script>
    

    [JavaScript]

    function registerDoubleKeyHandler(registerKeyCode, eventName, direction) {
        _appendTitleAttributes();
    
        $(document).bind(eventName, function(event) {
            if (event.keyCode == registerKeyCode) {
                var nodeName = event.target.nodeName.toUpperCase();
                if (nodeName == 'INPUT' || nodeName == 'TEXTAREA') {
                    return;
                }
    
                if (this.shortcutTimeout && this.prevKey == registerKeyCode) {
                    clearTimeout(this.shortcutTimeout);
                    this.shortcutTimeout = null;
    
                    return _followLink(direction);
                }
                else {
                    this.prevKey = registerKeyCode;
                    var thisObj = this;
                    this.shortcutTimeout = setTimeout(function() {
                        thisObj.shortcutTimeout = null;
                        thisObj.prevKey = null;
                    }, 300);
                }
            }
        });
    }
    
    function _appendTitleAttributes() {
        var positions = ['first', 'last'];
        for (var i = 0; i < positions.length; i++) {
            var position = positions[i];
            $('div.pagination').each(function() {
                $(this).find('ul > li:'+position+' > a[href]').each(function() {
                    var title = (position == 'first')
                    ? '前のページ (ショートカット: Pキーを2回押します)'
                    : '次のページ (ショートカット: Nキーを2回押します)';
                $(this).attr('title', title);
                });
            });
        }
    }
    
    function _followLink(direction) {
        var position = (direction == 'prevPage') ? 'first' : 'last';
    
        $('div.pagination').each(function() {
            $(this).find('ul > li:'+position+' > a[href]').each(function() {
                var color = '#000099';
                $(this).css('color', color).css('border-color', color).effect('pulsate', { times: 1 }, 300);
    
                document.location = this;
            });
        });
    }
    
  3. RUF Says:

    ありがとうございます。長文のスクリプトの記載、感謝です!

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS ログイン