メニューバー Widget の挿入
-
"SpryMenuBar.js" ファイルを検索して、Web サイトに追加します。 "SpryMenuBar.js" ファイルは、Adobe Labs からダウンロードした Spry ディレクトリにある widgets/menubar ディレクトリ内で検索できます。 詳細については、ファイルの準備を参照してください。
たとえば、Web サイトのルートフォルダ内に SpryAssets という名前のフォルダを作成し、このフォルダに "SpryMenuBar.js" ファイルを移動します。 "SpryMenuBar.js" ファイルには、メニューバー Widget をインタラクティブにするために必要な情報がすべて含まれています。
- 作成するメニューバーの種類に応じて、"SpryMenuBarHorizontal.css" ファイルまたは "SpryMenuBarVertical.css" ファイルのいずれかを検索して、Web サイトに追加します。 このファイルの追加先として、メインディレクトリである SpryAssets ディレクトリ、または CSS ディレクトリがある場合はそのディレクトリを選択できます。
- メニューバー Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryMenuBar.js" ファイルをリンクします。
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
"SpryMenuBar.js" ファイルへのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- ページのヘッドタグに次の link タグを挿入して Web ページに "SpryMenuBarHorizontal.css" ファイルまたは "SpryMenuBarVertical.css" ファイルをリンクします。
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
"SpryMenuBarHorizontal.css" または "SpryMenuBarVertical.css" へのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- 次のように、ul タグをコンテナタグとして挿入し、メニューバーの最上位レベルのメニュー項目ごとに li タグとサンプルテキストを挿入して Web ページにメニューバーの HTML コードを追加します。
<body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body>
-
li タグのテキストを a タグで囲みます。
<body> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </body>
- 次のように、3 番目のメニュー項目 (または他の任意のメニュー項目) に、a タグを含むリストをもう一つネストします。
<body> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </body>
ネストされたこのリストは、3 番目のメニュー項目のサブメニューです。 ネストされたリストが、最上位レベルのメニュー項目の a タグ内にないことを確認します。
- メニューバーコンテナ (ul タグ) を識別する一意の ID を、次のように追加します。
<body> <ul id="menubar1"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </body>
この ID は、後で Widget コンストラクタ内のコンテナの識別に使用します。
- メニューバーにスタイル設定を追加するには、次のように、適切なクラスを追加します。
<body> <ul id="menubar1" class="MenuBarHorizontal"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#" class="MenuBarItemSubmenu">Item 3</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> </body>
水平メニューバーと垂直メニューバーのいずれを作成するかを指定します。 最上位レベルのメニューバー項目にサブメニューがある場合は、MenuBarItemSubmenu クラスを a タグに割り当てます。 このクラスでは下矢印イメージを表示して、サブメニューが存在することを示します。
- Spry メニューバーオブジェクトを初期化するには、次の script ブロックをメニューバー Widget に対応する HTML コードの後に挿入します。
<ul id="menubar1" class="MenuBarHorizontal"> . . . </ul> <script type="text/javascript"> var menubar1 = new Spry.Widget.MenuBar("menubar1"); </script>new JavaScript 演算子によって、メニューバー Widget オブジェクトが初期化され、ul コンテンツが menubar1 の ID を使用して静的 HTML コードからインタラクティブなメニューバーオブジェクトに変換されます。 Spry.Widget.MenuBar メソッドはメニューバーオブジェクトを作成する Spry フレームワークのコンストラクタです。 このオブジェクトを初期化するために必要な情報は、この手順の開始時にリンクした SpryMenuBar.js JavaScript ライブラリに含まれています。
メニューバーの ul コンテナタグの ID が、Spry.Widgets.MenuBar メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。
- ページを保存します。
コード全体を次に示します。
<head> ... <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> </head> <body> <ul id="menubar1" class="MenuBarHorizontal"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#" class="MenuBarItemSubmenu">Item 3</a> <ul> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> <script type="text/javascript"> var menubar1 = new Spry.Widget.MenuBar("menubar1"); </script> </body>