基本設定

ここでは、組み込み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',
//        '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:早く表示
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。
postIncludeEvalValueMark JavaScriptのコードを変換する場合に使用します。フォームが送信されたタイミングでJavaScriptのコードを変換し、送信結果の表示を更新します。例)

設定内容を変更するには

/themes/適用しているテーマ/ 内にjsファイルを用意し、設定を変更する内容を記述してください。テンプレートでそのjsファイルを参照すれば、変更した設定が反映されます。

jsファイルの参照は、a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」)より後に記述してください。

2. HTMLの編集

post include機能は、実装方法が以下の3種類あります。それぞれの詳しい実装方法は以下のリンクから参照してください。