Menu Family: Basic Menu From Markup - tetsuya

メニューに入る。
Exampleのトップページ（リンクはこちら）の内容はExampleの方でフォローできそうなので、いくつかポイントだけ抑えておく。
１つは、YAHOO.widget.MenuオブジェクトがYAHOO.widget.Overlayのサブクラスということ。
このOverlayという名前の得たいの知れないクラスのAPIドキュメント（リンクはこちら）を見てみると、 YAHOO.widget.Panel（Containerででてくるのかな？）やYAHOO.widget.Tooltipも、これのサブクラスになっている。特に、

Overlayはページ・フロー上で絶対位置を決めるためのモジュールである。ポジショニングや、サイジング、zインデックス、viewpointのあわせてOverlayを制約するのに、便利なメソッドを持っている。Overlayは、その（Z軸上で）下にダイナミックに生成されるIFRAMEをもっている（IE6,5用）。

とか書いてあって興味深い。bringToTop()やcenter()というメソッドが定義されているのと同時に、位置や形状を変化されたときのイベントハンドラーの定義などできる様子。
以前に「Yahoo! UI Library: TreeViewで今風（いまふう）のメニューをつくるには」で作ったように、Menuを作るにはZ軸とポジションの操作が不可欠。こういうオブジェクトが（やっぱり）あるのですね。

Menuには、他に

YAHOO.widget.ContextMenu
YAHOO.widget.MenuBar

があって、これらはYAHOO.widget.Menuのサブクラスだから、当然、上のメソッドをinheritateしているか、もしくはoverrideしている。

Menuを形成する各項目は、YAHOO.widget.MenuItem（APIドキュメントはこちら）。

このような構成でMenuが生成される。（だいぶ、YUIの読み方が分かってきた気がする）

他の事項は、Exampleを通じてフォローできそうな感じなので、ここでは割愛する。

一番最初の例は、Body内に記述されたMarkupからMenuを構成する例である。
TabViewをMarkupから作ったときにあったような、「決まりごと」については、調べて、ソースコード（後述）にコメントした。

サンプルの初期画面は以下

「Menuを表示」ボタンを押すを、以下のような、超簡単なメニューが現れる（Basic Menuといわれる所以？）。

YUIのサンプルでは、画面のセンターに表示されるようになっているが、出現位置をかえてみた。
以下に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/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="scripts/yui/menu/menu-min.js"></script>

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

/*  IE7とFF3でテストしている限りでは関係なさそう。

    Position and hide the Menu instance to prevent a flash of unstyled 
     content when the page is loading.

div.yuimenu {
    position: absolute;
    visibility: hidden;
    
}
    Set the "zoom" property to "normal" since it is set to "1" by the 
    ".example-container .bd" rule in yui.css and this causes a Menu
    instance's width to expand to 100% of the browser viewport.

div.yuimenu .bd {
    zoom: normal;
    }
    やっぱり,IE7はCtl+でzoomするとスタイルがずれていく。
*/

</style>

<script type="text/javascript">
//モジュールパターンで実装する。
YAHOO.namespace("EGP");

YAHOO.EGP.MarkupMenu = function() {

	var oMenu;
	
	return{
    	init: function() {
		　　　// Muneのインスタンス生成
		　　　// コンストラクタの第1引数は、menuを構成するdivのid、
		　　　// 第2引数は、属性を表すオブジェクトリテラル
		　　　// 属性はMenuのAPIドキュメント
		　　　// http://developer.yahoo.com/yui/docs/YAHOO.widget.Menu.html
   		
	   		oMenu = new YAHOO.widget.Menu("basicmenu", 
   			   				{ xy: [300,45] }
						);

			// YAHOO.widget.Menuのメソッドrenderを呼んで、レンダリング。
   			oMenu.render();

			// Bottunのクリックイベントにメニューの表示（show）を仕掛ける。
			// EventのAPIはhttp://developer.yahoo.com/yui/docs/YAHOO.util.Event.html
			// 第4引数は、ハンドラーへの引数、第5引数は実行scope.
   			YAHOO.util.Event.addListener(
   		   				"menubutton", 
   		   				"click", 
   		   				oMenu.show, 
   		   				null, 
   		   				oMenu
   		   			);
		}
	};
}();

//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.EGP.MarkupMenu.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.EGP.MarkupMenu,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);

</script>
</HEAD>

<!-- class=" yui-skin-sam"の指定が必要 -->
<BODY class="yui-skin-sam">
<div id="container">
<p>
Body内のマークアップからMenuを作成します。
</p>
<!-- Toggle Buttonを作るdiv 
<button id="menutoggle" type="button">Menuを表示</button>
ここのidは自由。
-->
<button id="menubutton" type="button">Menuを表示</button>
<!-- Menuを作るdiv -->
<!-- このdivのclassは変えてもOK -->
<div id="basicmenu" class="yuimenu">
	<!-- class="bd"はbodyを表す（変更不可） -->
    <div class="bd">
		<!-- ulのclassは変えてもOK -->
        <ul class="first">
            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">
            	Yahoo! Mail</a></li>
            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">
            	Yahoo! Address Book</a></li>
            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">
            	Yahoo! Calendar</a></li>
            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">
            	Yahoo! Notepad</a></li>
        </ul>            
    </div>
</div>
</div>
</BODY>
</HTML>