タブ型のメニューを作成する（js-tabs）

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。（v1.3.0より）

サンプル）

---

<div class="js-tabs">
	<ul>
		<li><a href="#tabA">タブA</a></li>
		<li><a href="#tabB">タブB</a></li>
		<li><a href="#tabC">タブC</a></li>
	</ul>	
	<div id="tabA">
		<p>タブAの内容です。</p>
	</div>
	<div id="tabB">
		<p>タブBの内容です。</p>
	</div>
	<div id="tabC">
		<p>タブCの内容です。</p>
	</div>
</div>

---

タブ型のメニューを作成する（js-tabs）

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    //------
    // tabs
    tabsMark     : '.js-tabs',
    tabsConfig :
    {
        collapsible : false,
        cookie      : null,
        fx          : {
            //opacity : 'toggle', // クロスフェード
            //height  : 'toggle', // 縦スライド
            //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
        }
    },
    tabsArray  : [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
    ],

tabsMark	ここで指定したセレクタがタブ表示になります。
tabsConfig	タブのオプション設定です。 collapsible：選択されているタブを再選択した時の、選択状態の指定です。（true：選択されているタブを再選択した時に選択状態を解除する / false：選択されているタブを再選択した時に選択状態を解除しない） cookie：クッキーに最後に選択されていたタブを記録します。（null（初期値）：記録しない） fx：タブの表示・非表示時のアニメーションの指定です。（opacity：クロスフェード表示 / height：縦スライド表示 / duration：表示スピード（fast：速く / normal：普通 / slow：ゆっくり））
tabsArray	配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

詳しい設定内容は以下のページを参照してください。

UI/API/1.8/Tabs - jQuery JavaScript Library

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。

例）tabsMarkで「.js-tabs」と指定した場合

タブ部分とタブパネルを含んだ親要素にクラス「js-tabs」を付与します。

タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

---

<div class="js-tabs">
	<ul>
		<li><a href="#tabA">タブA</a></li>
		<li><a href="#tabB">タブB</a></li>
		<li><a href="#tabC">タブC</a></li>
	</ul>	
	<div id="tabA">
		<p>タブAの内容です。</p>
	</div>
	<div id="tabB">
		<p>タブBの内容です。</p>
	</div>
	<div id="tabC">
		<p>タブCの内容です。</p>
	</div>
</div>

CSS

必要に応じてスタイルを指定します。

例）

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  margin-bottom:0;
  padding-bottom:1px;
}
.ui-tabs .ui-tabs-nav li {
  border-bottom:0 none !important;
  float:left;
  list-style:none outside none;
  margin:0 0.2em 1px 0;
  padding:0;
  position:relative;
  top:1px;
  white-space:nowrap;
}

---