olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法

  1. Home>
  2. その他>
  3. キーボード操作>
  4. jQueryでショートカットキーを設定

キーボード操作jquery.shortkeys.js

jQueryでショートカットキーを設定

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.shortkeys.js"></script>
<script type="text/javascript">	
    $(document).ready(function() {
      $(document).shortkeys({
	'Space+V':    function () { alert("alert"); },
	'V':          function () { $('div').css("font-size","40px") },
      });
    });
</script> 
</head>

<body>
<div style="height:200px; padding:100px 0 0 200px;">
space + V →　アラート<br />
V　　　　 →　フォントサイズ変更
</div>
</body>
</html>

サイト独自のショートカットキーを作成できる jquery.shortkeys.js。
割り当てるショートカットキーにスクリプトを書き込めるので、サイトにあわせたトリガーにも使えます。

１．ダウンロード/セッティング

まず jQuery をダウンロードし次に jquery.shortkeys.js をダウンロードしてきて下さい。
そしてそれらを適当な所へアップします。 

２．<head>設定

アップしたスクリプトを読み込ませます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.shortkeys.js"></script>　

順番とパスに注意して読み込ませてください。
次にショートカットの設定を記述します。

<script type="text/javascript">
    $(document).ready(function() {
      $(document).shortkeys({
          'Space+V':    function () { alert("alert"); },

          'V':          function () { $('div').css("font-size","40px") },

      });
    });
</script>　

青いところにショートカットの割り当てを記述し、オレンジの所にそのアクションを書き込みます。
割り当てるショートカットは Ctrl や Shift は使えないみたいです。 

関連スクリプト

感想

jQueryでの記述方法を利用すれば色々手軽に出来ることｔも増えると思います。
ただこういったタイプのスクリプトを入れるには、それ相応の滞在時間を要するサイトじゃないと意味ないかも。
便利になるのもいいですがまずはコンテンツって事ですかね。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。