naotaka blog

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

1. RUF Says:
   3月 23rd, 2009 at 18:05:18

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

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

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

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

2. naotaka Says:
   3月 24th, 2009 at 20:39:11

   こんな感じで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:
   3月 26th, 2009 at 15:19:14

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