FTタブ

JQUERYUITAB01

1.0.0

1.2.0～

タブスタイルのコンテンツを出力するパーツです。

タブの見出しを表すノードパスもしくはテキストを指定します。マーキングを行う場合は、見出しに相当する部分に属性 data-gc-label="title" を記述してください。

コンテンツ

タブのコンテンツを表すノードパスもしくはテキストを指定します。マーキングを行う場合は、コンテンツに相当する部分に属性 data-gc-label="contents" を記述してください。

見出しラベルとコンテンツラベルが設定された部分を利用し、タブを出力します。

初期タブ番号

初期状態で表示するタブのインデックスを指定します。

► 数値(省略時は先頭コンテンツ0)

タブ見出しの幅縮小

タブの数に合わせて見出しの大きさを自動調整するかどうかを指定します。

• ► OFF : しない
• ► ON : する

横一列タブ配置

削除属性定義

(gcp="item:start.remove"のvalue属性)

ここに定義した属性はHTML中から削除されます。

ビュー編集タブ上でこの定義内容を編集し、削除対象を変更できます。

なし

.gcpJQueryUITab01

1.8.0

jquery-ui-core.js 1.10.2

jquery.ui.widget.js 1.10.2

jquery.ui.tabs.js 1.10.2

            <div class="samples">
            	<div class="flower">
                	<h3>アサガオ</h3>
                    <p><span>花の特徴:</span>早朝に漏斗形の花を開き、昼前にしぼんでしまう。ただし、
日陰にある場合は夕方まで咲き続けることもある。花柄には小さな苞（花のつけ根につく葉の変形したもの）
がある。雄しべは5本、雌しべは1本である。 </p>
                </div>
            	<div class="flower">
                	<h3>ベニバナ</h3>
                    <p><span>花の特徴:</span>茎先につく花は、大きな総苞片（花序全体を包む葉の変形
したもの）のあるアザミに似た頭花で、筒状花だけからなる。花の色は最初は黄色で、後に紅色に変わる。
 </p>
                </div>
            	<div class="flower">
                	<h3>キリシマツツジ</h3>
                    <p><span>花の特徴:</span>枝先に２～３輪の花をつける。花径は２～３センチで、花
の色は紅色ないし白である。雄しべは５本である。萼片は長い楕円形で小さい。 </p>
                </div>
            </div>
                

            <div class="gcpTab01">
             <div class="tabs pc">
              <ul class="head">
               <li class="item">
                <a class="button" href="#tabs-1">アサガオ</a>
               </li>
               <li class="item">
                <a class="button" href="#tabs-2">ベニバナ</a>
               </li>
               <li class="item">
                <a class="button" href="#tabs-3">キリシマツツジ</a>
               </li>
              </ul>
              <div class="panel" id="tabs-1">
               <p class=" contents">
                <span>花の特徴:</span>早朝に漏斗形の花を開き、昼前にしぼんでしまう。ただし、日陰
にある場合は夕方まで咲き続けることもある。花柄には小さな苞（花のつけ根につく葉の変形したもの）が
ある。雄しべは5本、雌しべは1本である。
               </p>
              </div>
              <div class="panel" id="tabs-2">
               <p class=" contents">
                <span>花の特徴:</span>茎先につく花は、大きな総苞片（花序全体を包む葉の変形したもの
）のあるアザミに似た頭花で、筒状花だけからなる。花の色は最初は黄色で、後に紅色に変わる。
               </p>
              </div>
              <div class="panel" id="tabs-3">
               <p class=" contents">
                <span>花の特徴:</span>枝先に２～３輪の花をつける。花径は２～３センチで、花の色は紅色
ないし白である。雄しべは５本である。萼片は長い楕円形で小さい。
               </p>
              </div>
              <var class="libOption" style="display:none;">{"active":0,"gcColoumDesignType":false}</var>
             </div>
            </div>