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

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

  1. Home>
  2. その他>
  3. キーボード操作>
  4. オリジナルのショートカットキーを作成

キーボード操作Shortcuts.js

オリジナルのショートカットキーを作成

スポンサードリンク
  • 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="shortcut.js"></script> 
<script type="text/javascript"> 
function init() {
	shortcut.add("Ctrl+B",function() {
	alert("The bookmarks of your browser will show up after this alert...");
	},{
	'type':'keydown',
	'propagate':true,
	'target':document
	});
	
	shortcut.add("Ctrl+N",function() {
	window.open('http://www.yahoo.co.jp/', 'mywindow1', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');
	},{
	'type':'keydown',
	'propagate':true,
	'target':document
	});
	
	shortcut.add("Ctrl+M",function() {
	myD  = new Date();
	alert(myD);
	},{
	'type':'keydown',
	'propagate':true,
	'target':document
	});
	
}
window.onload=init;
</script> 

</head> 

<body> 
  <ul style="padding:50px;list-style:none;">
    <li style="margin-bottom:5px;">「ctrl + B」= アラート出現</li>
    <li style="margin-bottom:5px;">「ctrl +N」= 新規ウィンドウでYahoo!を開く</li>
    <li style="margin-bottom:5px;">「ctrl + M」= アラートで現在の時間を表示</li>
  </ul>
</body> 
</html>

オリジナルのショートカットキーを作成するJavascriptです。
ショートカットをトリガーとして、他のスクリプトを走らせることができます。
フレームワークは使用していません。 

Shortcuts.jsのダウンロード

まずはサイトへ行きスクリプトをダウンロードしてきます。
CODEという見出しの箇所にダウンロード用のリンクがあるのでそれをクリック。
適当な名前で保存したら、サーバーへアップします。

<head>の設定

次にこのスクリプトを読み込ませます。

<script type="text/javascript" src="shortcut.js"></script>　

そして、ショートカットの設定を記述していきます。

ショートカットの設定

<script type="text/javascript">
function init() {
    shortcut.add("Ctrl+N",function() {
      window.open('http:www.yahoo.co.jp/', 'mywindow1', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');
      //ここにショートカットの動作を指定します
      },{
        'type':'keydown',
        'propagate':true,
         'target':document
    }); }
window.onload=init;
</script>　

これをヘッダーないし、外部にまとめて記述します。
ショートカットの記述を増やしたい場合は、 shortcut.add();をコピペして追加していくだけでOKです。

関連スクリプト

感想

どちらかというとキーボード派な自分にとってはありがたいスクリプト。
イーラーニング系のサイトとか情報系のサイト、滞在時間と動作の多いサイトに組み込んで使うと面白そうです。 

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

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

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