ポストインクルードの基本設定

ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost(送信)した結果を、ページのリロードなしで表示する機能です。

config.js内の設定

/js/config.jsの以下の箇所に設定内容が記載されています。

//--------------
// post include
postIncludeOnsubmitMark     : '.js-post_include',
postIncludeOnreadyMark      : '.js-post_include-ready',
postIncludeOnBottomMark     : '.js-post_include-bottom',
postIncludeOnIntervalMark   : '.js-post_include-interval',
postIncludeMethod           : 'replace', // ( 'swap' | 'replace' )
postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
postIncludeOffset           : 60,
postIncludeReadyDelay       : 0,
postIncludeIntervalTime     : 20000,
postIncludeArray  : [{
//  'mark'      : '.js-post_include-original',
//  'type'      : 'submit',
//  'method'    : 'swap',
//  'effect'    : 'slide',
//  'speed'     : 'slow'
}],
postIncludeEvalValueMark    : '.js-post_include-eval_value',
postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。
slow:ゆっくり表示 / fast:早く表示
postIncludeOffset js-include_bottomで読み込み時の下部からの読み込み開始位置になります。
postIncludeReadyDelay js-include_readyで読み込み時の読み込み開始時間を遅くする設定になります
postIncludeIntervalTime js-post_include-intervalで読み込み時の更新頻度をミリ秒で設定します。
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。
postIncludeEvalValueMark JavaScriptのコードを変換する場合に使用します。フォームが送信されたタイミングでJavaScriptのコードを変換し、送信結果の表示を更新します。
例)<input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-post_include-eval_value" />

設定内容を変更するには

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