Yahoo! UIのOverlayについて

ボタンやアイコンをクリックすると、メニューリストを展開できるようにする。

1.必要なYahoo! UIのCSSやJSをインクルードしておく。

2.紐付ける為にSPANタグ等を用意する。IDをつけ忘れないようにする。

sample.html

<SPAN id="menu"></SPAN>

3.javascript側でメニューの設定を行う。

sample.html

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

		Event.onDOMReady(
			function () {
				var oIconMenu = new YAHOO.widget.Overlay('iconmenu', { visible: false });
				var oButton = new YAHOO.widget.Button({
				    type: 'menu',
					id: 'iconpicker',
					label: 'メニュー',
					menu: oIconMenu,
					container: 'menu'
				});

				oButton.on(
					'appendTo', function () {
						oIconMenu.setBody(
                            // メニュー内のHTMLを設定
							"<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" width=\"80px\" >" + 
							"<tr><td>メニュー項目1</td></tr>" + 
							"<tr><td>メニュー項目2</td></tr>" + 
							"</table>"
						)
					}
				)

				var onOverlayClick = function (p_oEvent){
				oIconMenu.hide();
			};
		
			Event.on(oButton.getMenu().element, 'click', onOverlayClick);
		}
	);
}());