Implementing Container Keyboard Shortcuts with KeyListener

Ajax Javascript YUI Container Panel

このExampleではキーボードのリスナー（キーボードが押されるというイベントに反応するリスナー）を作成している。
このためには、YAHOO.util.KeyListenerを利用する。
KeyListenerをインスタンス化する際には、

	var kl2 = new YAHOO.util.KeyListener(
				// document全体にわたって、key strokeをlistenする。
				document, 
				// ファンクションキー（ctrl,alt,shift）＋keyの番号
				{ ctrl:true, keys:89 }, 
				// keyを押されたときの挙動  							
				{ fn:panel1.show, 
				 scope:panel1,
				// scopeがpanelに移る。
				 correctScope:true } 
                  );

というようにコンストラクタに引数を与える。この時、第1引数は、documentのどの範囲（DOMの範囲）をListenするかを指定する。この例では、documentを指定して、ページの全ての範囲でのKeyアクションをListenするように指定している。
第2引数は、どのキーをListenするかをあらわしている。ctrl、alt、shiftのファンクションキーも指定できる。
（キー番号表：ActionScriptの解説なのはちょっと皮肉です）
第3引数は、Keyを押されたときのハンドラの指定と、ハンドラーが実行されるスコープ、スコープ（具体的にはthis）をそこに移すか、を指定する。
第4引数は、DefaultがKeydownとなっているKeyイベントを表す（上では指定していない）、添付のサンプルでは、ESCを使う際にKeyupを指定している。

サンプルでは、Ctrl+Yが押されると下の画面にあるようなパネルが表示され、ESCキーによってそれが消えるようになっている。

このとき以下の配慮がなされている。

  • ESCキーのリスナーは、パネルが表示されたときにActiveになり、それが隠れた（消えた）ときにはinactiveになる。
  • Ctrl+Yは、パネルの状態に関係なくActiveになる。

上を実現するためには、パネル（Panel）のkeylisteners属性にYAHOO.util.KeyListenerのインスタンスを入れる。
この方法は、Panelのサブクラスである、Dialog、SimpleDialogにも適用できる。

以下にJavascriptを含むHTMLの全文を示す。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>

<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="scripts/yui/container/container-min.js"></script>

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 400px;
	height: auto;
	border:1px dashed #999999;
}
</style>

<script type="text/javascript">
YAHOO.namespace("EGP");

YAHOO.EGP.KeyBoard = function() {
	var Event = YAHOO.util.Event;

	var panel1;
		
	return{
    	init: function() {
		// Build panel1 based on markup
		panel1 = new YAHOO.widget.Panel("panel1", 
				{ xy:[350,330], 
				width:"250px", 
				visible: false } );

		// ESCはpanel1が表示されたときだけListenするようにする。（cfg.queueProperty("keylisteners", kl)）
		var kl = new YAHOO.util.KeyListener(
				// document全体にわたって、key strokeをlistenする。
				document, 
				// keyの番号
				{ keys:27 },
				// keyを押されたときの挙動  							
				{ fn:panel1.hide,
				scope:panel1,
				// scopeがpanelに移る。
				correctScope:true },
				// keyイベント（default:keydown）：　Safariがkeydownを認識しないため 
				"keyup" ); 
	 
		panel1.cfg.queueProperty("keylisteners", kl);
		panel1.render();

		// Ctrl+Yはpanelの表示に関わらずlistenするようにする。 
		var kl2 = new YAHOO.util.KeyListener(
				// document全体にわたって、key strokeをlistenする。
				document, 
				// ファンクションキー（ctrl,alt,shift）＋keyの番号
				{ ctrl:true, keys:89 }, 
				// keyを押されたときの挙動  							
				{ fn:panel1.show, 
				 scope:panel1,
				// scopeがpanelに移る。
				 correctScope:true } );
		kl2.enable();
	 
		Event.addListener("show", 
				"click", 
				panel1.show, 
				panel1, 
				true);
		Event.addListener("hide", 
				"click", 
				panel1.hide, 
				panel1, 
				true);
		}
	};
}();

YAHOO.util.Event.onDOMReady(
	//DomReadyイベントで発火するハンドラ
	YAHOO.EGP.KeyBoard.init,
	//ハンドラに渡すオブジェクト（関数）
	YAHOO.EGP.KeyBoard,
	//ハンドラは、上記のオブジェクトのスコープをもつ。   
	true
);

</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
Key Pressをlistenするサンプルです。
</p>
<div> 
panel1: 
<button id="show">Show (Ctrl+Y)</button> 
<button id="hide">Hide (Esc)</button> 
</div> 
 
<div id="panel1" style="visibility:hidden"> 
<div class="hd">KeyをListenするサンプルです</div> 
<div class="bd">パネルを消すには [ESC] を押してください</div> 
</div> 
</div>
</BODY>
</HTML>