a-blog cmsでPost Include後のコンテンツにJSを実行する

Post Includeとは

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されて います。この方法は組み込みJavaScriptのpost include機能を利用します。(v1.3.0より)

これにより簡単にコンテンツをAjaxで読み込んでくる事が出来るのですが、読み込んできた コンテンツにJavascriptを実行したい場面があると思います。(a-blog cmsの組み込みJSは標準で実行されます)

Post Include にコールバックを指定する

以下のコードのようform要素のonreset属性でコールバックを仕込むことができます。 (ここでは、Post Includeでページング処理をしています)


<form action="" method="post" class="js-post_include-bottom" onreset="callback();" >
	<div class="small-centered js-acms_loader" style="margin:20px auto;"></div>
	<input type="hidden" name="page" value="{forwardPage}" />
	<input type="hidden" name="tpl" value="/include/mainTop.html" />
	<input type="hidden" name="ACMS_POST_2GET" value="続きを読み込む" class="button expand" />
</form>

Post IncludeされてきたコンテンツにWebフォントを適用してみる

今回試しに、FontPlusさんのWebフォントを当ててみました。

FontPlusのスマートライセンスではJavascriptを使用して動的(現在表示されている文字のみをダウンロードしてくる)にWebフォントを適応するので、Post Includeでひっぱてきた記事には、Webフォントが当たっている物と当たってない文字が混ざって表示されます。



そこで先ほど仕込んだPost Includeのコールバックを使い、後から読み込んだコンテンツに対してWebフォントを当ててあげます。

FontPlusさんではAPIが公開されていてフォントを再度適用するのも簡単でした。 FONTPLUS API機能説明


<script type="text/javascript" src="http://webfont.fontplus.jp/accessor/script/fontplus.js?xxx=xxx" charset="utf-8"></script>
<script type="text/javascript">
function callback() {
	FONTPLUS.reload();
}
</script>

Webフォントはじめて使ってみたのですが、面白いですね! 皆さんも是非お試しを!

といった事でPost Includeでよく使いそうなコールバックについてのメモでした。


関連記事

Document Outliner

アウトライン生成ライブラリ、document-outliner をリリースしました

prism.js【syntaxhig hlighter】設定メモ

a-blog cmsでSVGを画像プレイスホルダーとして使う

a-blog cms + Varnish 触ってみる

a-blog cms テンプレート解体新書

【a-blog cms】アップロードしたPDFのサムネイルを作成する

最新記事

カテゴリー

ハッシュタグ