5.24 uji:tabbedLayout

uji:tabbedLayoutについて説明します。uji:tabbedLayoutには、以下の機能があります。

また、ブラウザによる対応状況についても説明します。

ブラウザ対応状況

基本機能

uji:tabbedLayoutタグは、タブ（見出し）によって表示を切り替える領域を作成します。

アトリビュート

uji:tabbedLayoutタグのアトリビュートは以下を指定します。

アトリビュート名	省略	意味	省略時の動作
width	可	切り替え領域の幅を指定します。(*)	標準の幅となります。
height	可	切り替え領域の高さを指定します。(*)	標準の高さとなります。
borderColor	可	切り替え領域枠の色を指定します。(*)	標準の色となります。
borderType	可	切り替え領域枠の形式を指定します。(*)	標準の形式となります。
borderWidth	可	切り替え領域枠の線幅を指定します。(*)	標準の線幅となります。
insets	可	切り替え領域内側の余白の幅を指定します。(*)	標準の余白となります。
background	可	切り替え領域の背景色を指定します。(*)	標準の背景色となります。
tabWidth	可	タブ部分の幅を指定します。(*)	標準の幅となります。
tabHeight	可	タブ部分の高さを指定します。(*)	標準の高さとなります。
tabBorderWidth	可	タブ部分の枠幅を指定します。(*)	標準の枠幅となります。
tabBackground	可	タブ部分の背景色を指定します。(*)	標準の背景色となります。

(*)“7.5.1 項目の指定方法”を参照してください。

コンテント: uji:tabbedLayoutタグのコンテントには、uji:tabbedLayoutRendererタグを1個以上記述します。それ以外のタグは記述できません。

使用例

JSP

<uji:tabbedLayout >
  <uji:tabbedLayoutRenderer title="共通" >
    共通部...
  </uji:tabbedLayoutRenderer>
  <uji:tabbedLayoutRenderer title="固有" >
    固有部...
  </uji:tabbedLayoutRenderer>
</uji:tabbedLayout>

注意事項

uji:tabbedLayoutタグは表示の切り替えにJavaScriptを利用しています。ブラウザの設定でJavaScriptを有効にする必要があります。
uji:tabbedLayoutタグの下に項目を配置する場合、切り替え領域の背景色を指定する場合には、領域の大きさ（width、height）を明に指定してください。
各ブラウザでそれぞれのアトリビュートが有効かどうかは“ブラウザ対応状況”を参照してください。
画面部品タグのコンテントとしてuji:tabbedLayoutタグを使用した場合、その画面部品タグのカレントオブジェクトはuji:tabbedLayoutRendererタグのコンテントでは使用できません。

イベントモデル

uji:tabbedLayoutタグは、タブ（見出し）によって表示を切り替える領域を作成します。

アトリビュート

uji:tabbedLayoutタグは、イベントモデルで使用する際に以下のアトリビュートを指定します。これ以外のアトリビュートについては、“基本機能”を参照してください。

アトリビュート名	省略	意味	省略時の動作
id	可	コンポーネントのIDを指定します。	自動的に付与されます。

コンテント

uji:tabbedLayoutタグのコンテントには以下のタグが記述できます。

uji:tabbedLayoutRenderer(1個以上)

使用例

JSP

<f:view>
  <uji:tabbedLayout >
    <uji:tabbedLayoutRenderer title="共通" >
      共通部...
    </uji:tabbedLayoutRenderer>
    <uji:tabbedLayoutRenderer title="固有" >
      固有部...
    </uji:tabbedLayoutRenderer>
  </uji:tabbedLayout>
</f:view>

注意事項: 注意事項については、“基本機能”を参照してください。

ブラウザ対応状況

アトリビュート	IE7	IE8	IE9	IE10	IE11
width	○	○	○	○	○
height	○	○	○	○	○
borderColor	○	○	○	○	○
borderType	○	○	○	○	○
borderWidth	○	○	○	○	○
insets	○	○	○	○	○
background	○	○	○	○	○
tabWidth	○	○	○	○	○
tabHeight	○	○	○	○	○
tabBorderWidth	○	○	○	○	○
tabBackground	○	○	○	○	○