Tumblrみたいに、「j」「k」で移動できる「jQuery.keyMove.js」
この記事は9年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。
TumblrやGmail、Googleリーダーなどで実装されている、「j」や「k」で次の記事/前の記事に移動できるインターフェースが便利だなーと思って、作ってみました。
MITライセンスですので、どうぞご自由にいじってください。商用も可です。
※全角モードになっていると動きません。
使い方は簡単なので、デモのソースを見れば分かるとは思います。
移動したい要素に同じクラス名をつけておいて、そのクラスにkeyMoveファンクションを実行するだけ。
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.keyMove.js"></script> <script type="text/javascript"> $(function(){ $(".targetBox").keyMove(); }); </script>
デフォルトでは「j」で次の位置、「k」で前の位置に移動します。
オプションで、キーコードを設定すれば、違うキーで移動できます。
(キーコードはこのサイトとかで調べてみてください)
ただ、ブラウザ/OSによってキーコードって変わるみたい。
そのへんは、よしなにやってちょうだい。
例)次の位置に「a」で移動、前の位置に「s」で移動する場合
<script type="text/javascript"> $(function(){ $(".targetBox").keyMove({ next:65, prev:83 }); }); </script>
不具合、疑問などありましたらコメントにてどうぞ。