yahoo ui library 「メニュー」 その1

メニューは多用されるパーツですので
メンテナンス性が高かったりカスタマイズが柔軟だと使いやすいですね。
yahoo ui のメニューはHTMLベースとJavascriptベースの両方でメニューを
生成させることができるようです。
もっとも単純なソースでそれぞれを作ってみましたので結果とソースを比較してみてください。
HTMLベースのサンプルを見る
Javascriptベースのサンプルを見る
*サンプルはver0.12を使用

HTMLベースでのソース
[html]

メニューのサンプル

var oMenu = new YAHOO.widget.Menu(“basicmenu”);
oMenu.render();
oMenu.show();

[/html]
Javascriptベースでのソース
[html]

メニューのサンプル

var oMenu = new YAHOO.widget.Menu(“basicmenu”);
oMenu.addItem(new YAHOO.widget.MenuItem(“Yahoo! Mail”, { url:”http://mail.yahoo.com”}));
oMenu.addItem(new YAHOO.widget.MenuItem(“Yahoo! Address Book”, { url:”http://addressbook.yahoo.com”}));
oMenu.addItem(new YAHOO.widget.MenuItem(“Yahoo! Calendar”, { url:”http://calendar.yahoo.com”}));
oMenu.addItem(new YAHOO.widget.MenuItem(“Yahoo! Notepad”, { url:”http://notepad.yahoo.com”} ));
oMenu.render(document.body);
oMenu.show();

[/html]
なぜかサンプルでは画面をクリックするとメニューが消えてしまいます。
初期状態ではそのように振舞うのでしょう。
メニューというパーツはテキストリンクやイメージにマウスオーバーしたり
クリックするとメニューが出るようにしなければならないので
どの部分のどのような動作を受けてという設定をしなければいけないようです。
次回につづく…

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中