タブ（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' : {}
// }
],
| acmsTabsMark | ここで指定したセレクタがタブ表示になります。 |
|---|---|
| acmsTabsConfig | タブのオプション設定です。tabClass：タブに自動で付与されるクラス名activeClass：選択状態のタブに自動で付与されるクラス名readyMark：ここで指定したクラスをタブに付与した場合、そのタブが初期状態で選択された状態になります。（'window.document.location.hash' を指定した場合は、表示中のURLが http://example.com/tab.html#hoge の時に id="hoge"のパネルが表示状態になります。） |
| acmsTabsArray | 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。 |
設定をカスタマイズする
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. デモ
自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。