タブ（acms tabs）

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

タブ表示は他に「js tabs」があります。js tabsはタブとタブパネル（タブの内容）が同じ親要素内に入っているのに対し、acms tabsはタブとタブパネルの親要素が必ずしも同じでなくてもよい、という違いがあります。acms tabsはタブのhref属性値（#を除く）とタブパネルのid属性値が同じであれば、それぞれが違う親要素の中にあってもタブ表現が可能です。

デフォルト設定について

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

//----------
// acms tabs
acmsTabsMark     : '.js-acms_tabs',
acmsTabsConfig   :
{
    tabClass     : 'js-acms_tab',
    activeClass  : 'js-acms_tab-active',
    readyMark    : 'js-ready-acms_tabs'
},
acmsTabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

---

---

設定をカスタマイズする

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsMark = '.js-sample-tabs';
  ACMS.Config.acmsTabsConfig = {
    tabClass     : 'js-sample-tab',
    activeClass  : 'js-sample-tab-active',
    readyMark    : 'js-sample-ready-tabs'
  }
});

配列で使用する方法

acmsTabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。 markにはacmsTabsMarkを、configにはacmsTabsConfigの設定を指定できます。

acmsTabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsArray.push({
    mark: '.js-sample-tabs',
    config: {
      tabClass.    : 'js-sample-tab',
      activeClass  : 'js-sample-tab-active',
      readyMark    : 'js-sample-tab-ready'
    }
  });
});

HTMLとCSSの記述

HTML

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

例）acmsTabsMarkで .js-acms_tabsと指定した場合

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

<ul class="js-acms_tabs">
  <li><a href="#tab2-1">タブ1</a></li>
  <li><a href="#tab2-2">タブ2</a></li>
  <li><a href="#tab2-3">タブ3</a></li>
</ul>
<div id="tab2-1">
	タブ1の内容
</div>
<div id="tab2-2">
	タブ2の内容
</div>
<div id="tab2-3">
	タブ3の内容
</div>

CSS

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

例）

.js-acms_tab-active {
  background-color: #CCCCCC;
}

3. デモ

---