ポストインクルードの基本設定
ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost(送信)した結果を、ページのリロードなしで表示する機能です。
1. 設定の編集
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。
// post include
postIncludeOnsubmitMark : '.js-post_include',
postIncludeOnreadyMark : '.js-post_include-ready',
postIncludeMethod : 'swap', // ( 'swap' | 'replace' )
postIncludeEffect : 'slide', // ( 'slide' | 'fade' | '' )
postIncludeEffectSpeed : 'slow', // ( 'slow' | 'fast' )
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要素に適用されます。 |
postIncludeMethod | swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える |
postIncludeEffect | slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし |
postIncludeEffectSpeed | postIncludeEffectでエフェクトが指定されている時のみ有効になります。slow:ゆっくり表示 / fast:早く表示 |
postIncludeArray | 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。 |
設定内容を変更するには
/themes/適用しているテーマ/ 内にjsファイルを用意し、設定を変更する内容を記述してください。テンプレートでそのjsファイルを参照すれば、変更した設定が反映されます。
jsファイルの参照は、a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」)より後に記述してください。
2. HTMLの編集
post include機能は、実装方法が以下の2種類あります。それぞれの詳しい実装方法は以下のリンクから参照してください。