特定の箇所をクリックした際に、指定した要素の表示／非表示をフェード効果で切り替える機能です。（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 |
フェード表示のオプション設定です。
- initial：ページを表示したときの表示／非表示の初期状態です。（show：表示 / hide：非表示）
- effect：フェードの表示・非表示時のアニメーションの指定です。（fade：フェードしながら表示 / slide：スライドして表示）
- speed：フェードの表示・非表示時のアニメーションスピードの指定です。（fast：速く表示 / slow：ゆっくり表示）
- activeClass：「現在表示されている要素」に対して付与するクラス名です。
- readyMark：ページを表示したときに、ここで指定したセレクタが強制的に表示状態になります。基本はinitialで表示／非表示を指定しておき、特定のもののみ表示状態にしたい場合にこの設定を使用します。
|
設定のカスタマイズ
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>
