RUF より

RUF — Thu, 26 Mar 2009 06:19:14 +0000

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

naotaka より

naotaka — Tue, 24 Mar 2009 11:39:11 +0000

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

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

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

[HTML]

>div class="pager"<

    « 前のページ
1
2
3
4
5
6
7
8
...
400
次のページ »

[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;
        });
    });
}

RUF より

RUF — Mon, 23 Mar 2009 09:05:18 +0000

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

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

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

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

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

RUF より

naotaka より

[HTML]

[JavaScript]

RUF より

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