ポストインクルードの基本設定
ポストインクルードは Ver. 3.2 で上位互換である「htmx」が組み込みJSとして標準機能に組み込まれたため、Ver. 3.2 より非推奨になりました。
代替機能として、組み込みJS「htmx」の利用を推奨いたします。
ここでは、組み込み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',
// 'effectSpeed': 'slow'
}],| postIncludeOnsubmitMark | ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。 |
|---|---|
| postIncludeOnreadyMark | ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。 |
| postIncludeOnBottomMark | ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページの下部までスクロールしたら自働的に送信されて結果を表示します。「.js-post_include-bottom」の場合は、class="js-post_include-bottom" が付与されているform要素に適用されます。 |
| postIncludeOnIntervalMark | ここで指定したセレクタのフォームは、送信ボタンを押さなくても一定時間ごとに自働的に送信されて結果を表示します。「.js-post_include-interval」の場合は、class="js-post_include-interval" が付与されているform要素に適用されます。 |
| postIncludeMethod | swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える |
| postIncludeEffect | slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし |
| postIncludeEffectSpeed | postIncludeEffectでエフェクトが指定されている時のみ有効になります。slow:ゆっくり表示 / fast:早く表示 |
| postIncludeOffset | postIncludeOnBottomMark で指定されたセレクタのフォームの下部からの読み込み開始位置になります。 |
| postIncludeReadyDelay | postIncludeOnreadyMark で指定されたセレクタのフォームの読み込み開始時間を遅くする設定になります。ミリ秒で設定します。 |
| postIncludeIntervalTime | postIncludeOnIntervalMark で指定されたセレクタのフォームの読み込み時の更新頻度をミリ秒で設定します。 |
| postIncludeArray | 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。 |
Ver. 2.8.0よりpostIncludeEvalValueMarkの設定ではキャッシュさせないポストインクルードが動作しなくなりました。詳しい実装方法については「post includeの結果をキャッシュさせない方法」の代替案をご覧ください。(2020年11月19日)
Ver. 2.11.25よりデフォルトの設定だと tplコンテキストが無効になりました。ポストインクルードを利用する際には ポストインクルードの準備 をご覧ください。(2021年6月16日)