フェーダートグル（複数指定可能）
特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える機能です。（Ver.1.2.1より）
初期状態は非表示状態です。通常は隠しておき、クリックした時に表示されるようなものに使用できます。js-faderでは、表示／非表示の対象を複数指定できます。
デモ
自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。
デフォルト設定
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
//-------
// fader
faderMark : '.js-fader',
faderConfig :
{
initial : 'hide', // ( 'hide' | 'show' )
effect : 'fade', // ( 'fade' | 'slide' | '' )
speed : 'fast', // ( 'fast' | 'slow' )
activeClass : 'js-fader-active',
readyMark : '.js-ready-fader' // e.g. window.document.location.hash
},
faderArray : [
// {
// 'mark' : '',
// 'config' : {}
// }
],
| faderMark | ここで指定したセレクタが表示／非表示の切り替えをするスイッチになります。 |
|---|---|
| faderConfig | フェード表示のオプション設定です。
|
設定のカスタマイズ
config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。
ACMS.Ready(function(){
ACMS.Config. faderMark = '.js-sample-fader';
ACMS.Config.faderConfig = {
initial : 'hide', // ( 'hide' | 'show' )
effect : 'fade', // ( 'fade' | 'slide' | '' )
speed : 'fast', // ( 'fast' | 'slow' )
activeClass : 'js-fader-active',
readyMark : '.js-ready-fader' // e.g. window.document.location.hash
}
});
配列で使用する方法
faderArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはfaderMark を、configにはfaderConfig の設定を指定できます。
faderArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。
ACMS.Ready(function(){
ACMS.Config.faderArray.push({
mark: '.js-sample-fader',
config: {
initial : 'hide', // ( 'hide' | 'show' )
effect : 'fade', // ( 'fade' | 'slide' | '' )
speed : 'fast', // ( 'fast' | 'slow' )
activeClass : 'js-fader-active',
readyMark : '.js-ready-fader'
}
});
});
HTMLの編集
指定したクラスをHTMLに記述します。
例）tabsMarkで「.js-fader」と指定した場合
表示／非表示を切り替えるスイッチのa要素にクラス「js-fader」を付与し、そのa要素のhref属性には頭に#が付いたフラグ名を付けます。
表示／非表示される内容部分の要素には、id属性値としてa要素で指定したhref属性値の#なしの名称を付けます。
<p><a href="#fadeSampleA" class="js-fader">詳細Aを表示する</a></p>
<p><a href="#fadeSampleB" class="js-fader">詳細Bを表示する</a></p>
<p id="fadeSampleA">詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。</p>
<p id="fadeSampleB">詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。</p>
