cflayout タグとcflayoutarea タグを使用して、タブメニューを作成する事ができます。

コードと動き

【メインページ】
必要なCSSプロパティを設定します。 （タブ内で使用するCSS含む）

<style type="text/css">
#tabArea {
  width:350px;    /* 横幅 */
  text-align:left;/* テキスト配置 */
}
#tab_regist,#tab_list {
  padding:20px;   /* 余白指定 */
}
#tab_list ul {    /* マーカーを画像に変更 */
  list-style-type:none;
  list-style-image:url(/img/coldfusion/flower_07.gif);
}
</style>

cflayout タグとcflayoutarea タグを使用して、レイアウト領域を作成します。

<cfajaximport tags="cfform">
<!--- タブ --->
<center>
<cflayout name="tabArea" type="tab" tabHeight="200">
  <!--- 新規登録タブ --->
  <cflayoutarea name="tab_regist" title="新規登録"
    source="sample_tab1.cfm" refreshOnActivate="true">
  </cflayoutarea>
  <!--- 花の名リストタブ --->
  <cflayoutarea name="tab_list" title="花の名リスト"
    source="sample_tab2.cfm" refreshOnActivate="true">  
  </cflayoutarea>
</cflayout>
</center>

メインページのcflayoutarea タグのsource 属性で指定したページを作成します。
ここでは、【新規登録タブ】と【花の名リスト タブ】を作成します。

【新規登録タブ】
サンプルでは、登録フォームの表示と、「登録する」ボタンをクリックした時のDB登録処理を指定しています。ここでは、フォーム表示部分を紹介します。

<cfform action="" method="post">
  好きな花の名前
  <cfinput id="name" name="name" type="text" />
  <br /><br />
  <center>
  <cfinput id="submit" name="submit"
    type="submit" value="登録する" />
  </center>
</cfform>

【花の名リスト タブ】
サンプルでは、登録済みの花の名リストの表示と、アイコンをクリックした時のDB削除処理を指定しています。ここでは、花の名リスト表示部分を紹介します。
リンク先を現在のタブ内に表示させる場合には、AjaxLink 関数を使用します。

<ul>
<cfoutput query="request.select">
  <li>
     #name# 
    <a href=
      "#AjaxLink('#cgi.SCRIPT_NAME#?del_id=#id#'#)">
    <img src="../img/coldfusion/cancel.gif" /></a>
  </li>
  </cfoutput>
</ul>

説明

タブメニューを作成する場合、cflayout タグとcflayoutarea タグを使用します。

cflayout タグでは、子の cflayoutarea 領域の外観と配置を制御します。
パラメータには以下の属性が指定できます。

cflayoutarea タグは常に cflayout タグの子にする必要があります。
パラメータには以下の属性が指定できます。

レイアウト領域のコンテンツを指定するには、source 属性またはタグ本文を使用します。両方とも指定されている場合は、source 属性で指定されたコンテンツが使用され、タグ本文は無視されます。

以下のルールにより、さまざまなレイアウトを複雑に組み合わせることが可能になります。

1. cflayoutarea タグの直下の子としてcflayoutarea タグを含めることはできません。
   
2. cflayoutarea タグの直下の子としてcflayout タグを含めることができます。
   ・ただし、cflayout タグの直下の子としてcflayoutarea タグを含めることはできません。
   ・cflayout タグの子として cfloop タグ や cfquery タグを使用し、その本文に cflayoutarea タグを含めることができます。
3. tab タイプのレイアウトの中に border タイプのレイアウトを配置することはできません。

次の JavaScript 関数を使用すると、レイアウト領域の有効化、無効化、表示、非表示、展開、折り畳み、選択などが可能になります。

AjaxLink 関数を使用すると、リンク先が現在の Ajax コンテナに表示されます。
パラメータには以下の属性が指定できます。

この関数で指定されたリンクがブラウザでクリックされると、HTTP レスポンスによって現在のページが置き換えられるのではなく、cfdiv、cflayoutarea、cfpod、または cfwindow コントロールにリンク先の URL が渡されます。
上記のコントロール内にある a タグの href 属性の URL がこの関数で指定されている場合にのみ効果を持ちます。 そうでない場合、リンクは通常どおりに機能します。

注意メモ

1. cflayoutarea タグのsource 属性で指定したページにエラーがあると、タブが正常に表示されない場合があります。表示されない場合は、エラーがないか確認してください。