2.1.74. タブウィジェット¶

タブウィジェット は UI標準 UI部品タブ の内容に準拠したタブ表示用UI部品である。

本部品には以下のバリエーションがあり、必要に応じて使い分けること。

クライアントサイドでのタブ切り替えタイプ <tab:content>

サーバにリクエストを送信するタイプ <tab:link>

2.1.74.1. コードサンプル¶

設計成果物(ローカル動作)

<tab:group name="tab">

  <%-- クライアントサイドで切り替えを行うタブ --%>
  <tab:content
    title="ユーザ基本情報"
    selected="true"
    value="tab_baseinfo">

    <field:text title="ログインID"
                domain="ログインID"
                required="true"
                maxlength="20"
                hint="半角英数記号20文字以内"
                name="formdata.loginId"
                sample="test01">
    </field:text>

  </tab:content>

  <%-- サーバサイドにリクエストを送信するタブ --%>
  <tab:link
      title="パスワード変更"
      uri=""
      dummyUri="RW99ZZ6104.jsp">
  </tab:link>
</tab:group>

実装成果物(サーバ動作)

<tab:group name="tab">

  <%-- クライアントサイドで切り替えを行うタブ --%>
  <tab:content
    title="ユーザ基本情報"
    selected="true"
    value="tab_baseinfo">

    <field:text title="ログインID"
                domain="ログインID"
                required="true"
                maxlength="20"
                hint="半角英数記号20文字以内"
                name="formdata.loginId"
                sample="test01">
    </field:text>

  </tab:content>

  <%-- サーバサイドにリクエストを送信するタブ --%>
  <tab:link
      title="パスワード変更"
      uri="/action/ss99ZZ/W99ZZ61Action/RW99ZZ6104">
  </tab:link>
</tab:group>

2.1.74.2. 仕様¶

ローカル動作時の挙動

サーバサイドにリクエストを送信するタイプのタブの場合、タブクリック時にはdummyUrlで指定されたJSPファイルに遷移する。

属性値一覧 [◎ 必須属性 ○ 任意属性 × 無効(指定しても効果なし)]

名称	内容	タイプ	サーバ	ローカル	備考
<tab:group>
name	タブグループ名を指定する	文字列	◎	×	ページ内で一意となる値を指定する
<tab:content>
title	タブに表示する見出し	文字列	◎	◎
value	タブの識別名	文字列	◎	×	tabグループ内で一意となる値を指定する
selected	タブの初期選択状態	真偽値	○	○	tabグループ内で初期選択状態とする contentに’true’を設定する
cssClass	HTMLのclass属性値	文字列	○	○
<tab:link>
id	htmlのid属性	文字列	○	○
title	タブに表示する見出し	文字列	◎	◎
uri	遷移先のuri	文字列	◎	×
cssClass	HTMLのclass属性値	文字列	○	○
allowDoubleSubmission	二重サブミットを許容するか否か	真偽値	○	×	デフォルトは ‘true(許容する)’
dummyUri	ローカル動作時の遷移先	文字列	×	○

部品一覧

パス

内容

/WEB-INF/tags/widget/tab/*.tag

タブウィジェット

/js/jsp/taglib/nablarch.js

タブウィジェットが使用する以下タグののエミュレーション機能を実装するタグライブラリスタブJS

n:submitLink

/css/style/base.less

基本HTMLの要素のスタイル定義。タブに関する定義もここに含まれる。