jquery.hotkeys.jsを試してみたよ。
jQuery のプラグイン jquery.hotkeys.js を試してみたよ。
ダウンロードは js-hotkeys - Google Code から。 落としてきたものを展開するんだけれども、 カレントディレクトリに散乱してしまうのでディレクトリを掘った方が良いと思う。
展開した中に入っている jquery.hotkeys.js がそれ。 一緒に入ってる jQuery は 1.1.4なものの、 1.2.1もサポートされているみたいなので気にせず1.2.1で動かす。 サンプル的な動きは Live Demo を見るのが良いと思う。
インターフェイスはこうなってるらしい。
// イベント設定。
$.hotkeys.add(KEY, OPTIONS, CALLBACK);
// イベント削除。
$.hotkey.remove(KEY, OPTIONS);
引数の中で、 OPTIONS はオプションで、 特に指定が無ければ省略出来るよ。 なので、一番簡単な使い方はこんな感じになる。
// "j"のkeydown（デフォルト）にイベントリスナーを設定。
$.hotkeys.add('j', function ()
{
alert('hit.');
});
// "j"のkeydown（デフォルト）のイベントリスナーを削除。
$.hotkeys.remove('j');
オプションは以下のようなものがある。
| キー | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| type | String | keydown | 補足するイベント |
| propagate | Boolean | false | イベントの伝達を制御 |
| disableInInput | Boolean | false | inputやtextareaのフォーカス時の処理を制御 |
| target | element/String | html | callbackのthisを指定 |
| checkParent | Boolean | true | OperaとSafariのバグ依存回避用？ |
オプション指定する場合こんな感じ。
// "Ctrl+a"のkeyupにイベントリスナーを設定。
$.hotkeys.add('Ctrl+a',
{
target : 'div.select',
type : 'keyup'
}, function()
{
// クラスhigeをトグル。
$(this).toggleClass('hige');
});
// "Ctrl+a"のイベントリスナーを削除。
$.hotkeys.remove('Ctrl+a', {target: 'div.select'});
このオプションの中でも良く使うと思うのが、 type はまぁ良しとして、 disableInInput だと思う。 これ、物凄く便利っす。 こいつを true にしておくだけで、 input や textarea にフォーカスしてる時は処理をスルーしてくれる。 今回はフォームとは全く関係ない処理を書いてたので、 本当に助かった。
何となくですが、今回書いたものを晒してみたり。 jとkでh1〜h6を行ったり来たりするだけ。
(function ()
{
// hotkeysのオプションを定義。
var options = {
'type': 'keydown',
'disableInInput': true
}
// ポジションホルダー
var positions = [0];
// それぞれのヘッダの位置を取ってくる。
$('h1, h2, h3, h4, h5, h6').each(function ()
{
positions.push(this.offsetTop + 15);
});
// ソート。
positions.sort(function (a, b)
{
return a > b ? 1 : -1;
});
// 現在の位置を取得する関数を定義。
var getOffset = function ()
{
if ($.browser.msie)
return document.body.scrollTop || document.documentElement.scrollTop;
else
return window.pageYOffset;
}
// "j"にイベントリスナーを登録。
$.hotkeys.add('j', options, function ()
{
var offset = getOffset();
for (var i = 0; i < positions.length; i++)
{
if (offset < positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
// "k"にイベントリスナーを登録。
$.hotkeys.add('k', options, function ()
{
var offset = getOffset();
for (var i = positions.length; i >= 0; --i)
{
if (offset > positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
})();//END: lambda.
- Posted at:
- 2008/01/07 23:34:25
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2008/01/07/tried-using-js-hotkeys/trackback/
TrackBacks
まだ登録されていません。
Comments
まだ登録されていません。