タブ付きのパネル Widget の挿入
-
"SpryTabbedPanels.js" ファイルを検索して、Web サイトに追加します。 "SpryTabbedPanels.js" ファイルは、Adobe Labs からダウンロードした Spry ディレクトリにある widgets/tabbedpanels ディレクトリ内で検索できます。 詳細については、ファイルの準備を参照してください。
たとえば、Web サイトのルートフォルダ内に "SpryAssets" という名前のフォルダを作成し、このフォルダに "SpryTabbedPanels.js" ファイルを移動します。 "SpryTabbedPanels.js" ファイルには、タブ付きのパネル Widget をインタラクティブにするために必要な情報がすべて含まれています。
- "SpryTabbedPanels.css" ファイルを検索して、Web サイトに追加します。 このファイルの追加先として、メインディレクトリである SpryAssets ディレクトリ、または CSS ディレクトリがある場合はそのディレクトリを選択できます。
- タブ付きのパネル Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryTabbedPanels.js" ファイルをリンクします。
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
"SpryTabbedPanels.js" ファイルへのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- ヘッドタグに次の link タグを挿入して、Web ページに "SpryTabbedPanels.css" ファイルをリンクします。
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
"SpryTabbedPanels.css" ファイルへのファイルパスが正しいことを確認します。 このパスは、Web サイト内のどこにファイルを配置したかによって異なります。
- タブ付きのパネル Widget を Web ページに追加するには、ページ上のタブ付きのパネルの表示位置に次の div タグを挿入します。
<div id="TabbedPanels1" class="TabbedPanels"> </div>
- タブ付きのパネルにタブを追加するには、次のように、ul class="TabbedPanelsTabGroup" タグを div id="TabbedPanels1"... タグ内に挿入し、追加するタブごとに li class="TabbedPanelsTab" タグを挿入します。
<div class="TabbedPanels" id="TabbedPanels1"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab">Tab 1</li> <li class="TabbedPanelsTab">Tab 2</li> <li class="TabbedPanelsTab">Tab 3</li> <li class="TabbedPanelsTab">Tab 4</li> </ul> </div>
上のコードでは、Widget に 4 つのタブが追加されます。 追加できるタブ数は無制限です。
- 各タブにコンテンツ領域やパネルを追加するには、次のように、div class="TabbedPanelsContentGroup" コンテナタグを ul タグの後に挿入し、コンテンツパネルごとに div class="TabbedPanelsContent" タグを挿入します。
<div class="TabbedPanels" id="TabbedPanels1"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab">Tab 1</li> <li class="TabbedPanelsTab">Tab 2</li> <li class="TabbedPanelsTab">Tab 3</li> <li class="TabbedPanelsTab">Tab 4</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent">Tab 1 Content</div> <div class="TabbedPanelsContent">Tab 2 Content</div> <div class="TabbedPanelsContent">Tab 3 Content</div> <div class="TabbedPanelsContent">Tab 4 Content</div> </div> </div>
TabbedPanelsContent の開始タグと終了タグの間にコンテンツを挿入します。たとえば、前の例では Tab 1 Content です。 コンテンツには、HTML フォームエレメントなどの有効な HTML コードを指定できます。
- Spry タブ付きのパネルオブジェクトを初期化するには、次の script ブロックをタブ付きのパネル Widget に対応する HTML コードの後に挿入します。
<div id="TabbedPanels1" class="TabbedPanels"> . . . </div> <script type="text/javascript"> var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); </script>new JavaScript 演算子によって、タブ付きのパネル Widget オブジェクトが初期化され、div コンテンツが TabbedPanels1 の ID を使用して静的 HTML コードからインタラクティブなタブ付きのパネルオブジェクトに変換されます。 Spry.Widget.TabbedPanels メソッドは、タブ付きのパネルオブジェクトを作成する Spry フレームワークのコンストラクタです。 このオブジェクトを初期化するために必要な情報は、この手順の開始時にリンクした SpryTabbedPanels.js JavaScript ライブラリに含まれています。
タブ付きのパネルの div タグの ID が、Spry.Widgets.TabbedPanels メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。
- ページを保存します。
コード全体を次に示します。
<head> . . . <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> </head> <body> <div class="TabbedPanels" id="TabbedPanels1"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab">Tab 1</li> <li class="TabbedPanelsTab">Tab 2</li> <li class="TabbedPanelsTab">Tab 3</li> <li class="TabbedPanelsTab">Tab 4</li> </ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelsContent">Tab 1 Content</div> <div class="TabbedPanelsContent">Tab 2 Content</div> <div class="TabbedPanelsContent">Tab 3 Content</div> <div class="TabbedPanelsContent">Tab 4 Content</div> </div> </div> <script type="text/javascript"> var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); </script> </body></body>