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>

不具合、疑問などありましたらコメントにてどうぞ。

共有: