タブ（jQuery UI）
a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。（Ver. 1.3.0より）
デモ
自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。
デフォルト設定について
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
//------
// 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 | 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。 |
設定のカスタマイズ
config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。
ACMS.Ready(function(){
ACMS.Config. tabsMark = '.js-sample-tabs';
ACMS.Config.acmsTabsConfig = {
collapsible : false,
cookie : null,
fx : {
//opacity : 'toggle', // クロスフェード
//height : 'toggle', // 縦スライド
//duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
}
}
});
配列で使用する方法
tabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはtabsMark を、configにはtabsConfig の設定を指定できます。
tabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。
ACMS.Ready(function(){
ACMS.Config.tabsArray.push({
mark: '.js-sample-tabs',
config: {
collapsible : false,
cookie : null,
fx : {
//opacity : 'toggle', // クロスフェード
//height : 'toggle', // 縦スライド
//duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
}
}
});
});
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;
}