2010年04月29日

company3で試すjs-post_inculde機能

a-blog cms 1.3.0b では、JavaScriptが分からない人でもAjax機能を実装する事が簡単に出来る機能が用意されております。その方法を簡単に書いておきますので、よろしければ以下の手順のようにお試し下さい。

サイト内検索した時にリロード無しにメインのコンテンツエリアを書き換える

修正するファイルは、/themes/company3/include/subInfo.html のみで、最初は以下のような感じになっております。

<!-- エントリー検索　開始▼▼ -->
<div id="freewordSearch" class="menuListBox">
	<h2>検索</h2>
	<form action="" method="post" name="searchForm" id="searchForm">
		<input type="text" name="keyword" value="%{KEYWORD}" size="15" />
		<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
		<input type="submit" name="ACMS_POST_2GET" value="検索" />
		<input type="hidden" name="tpl" value="/search.html" />
		<input type="hidden" name="bid" value="%{BID}" />
	</form>
</div>
<!-- エントリー検索　終了▲▲ -->

メインコンテンツの表示内容の確認

まずは、何が起っているのか分かるようにAjax機能を利用せずに、ページ遷移して目的の表示をさせてみます。上記との違いは、

<input type="hidden" name="tpl" value="/include/search.html" />

"hidden"で渡している"tpl"の値を /themes/company3/search.html から /themes/company3/include/search.html に変更します。実行して頂いてソースを確認して頂けば分かる事ですが、簡単に説明すると＜html＞タグから始まるHTML全文でなく、JavaScriptで書き換えたい部分だけにしたHTMLのテンプレートになっています。

Ajax化するにはclassとtargetを指定するだけ

次に、formタグに class="js-post_include" target="#jsChangeContents" を追記します。

<form action="" method="post" name="searchForm" id="searchForm" class="js-post_include" target="#jsChangeContents">

完成形は以下のような感じ。target属性は、どこのdivを書き換えるかを指定しています。targetが無いと、そのフォーム自身が置き換わります。

<!-- エントリー検索　開始▼▼ -->
<div id="freewordSearch" class="menuListBox">
	<h2>検索</h2>
	<form action="" method="post" name="searchForm" id="searchForm" class="js-post_include" target="#jsChangeContents">
		<input type="text" name="keyword" value="%{KEYWORD}" size="15" />
		<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
		<input type="submit" name="ACMS_POST_2GET" value="検索" />
		<input type="hidden" name="tpl" value="/include/search.html" />
		<input type="hidden" name="bid" value="%{BID}" />
	</form>
</div>
<!-- エントリー検索　終了▲▲ -->

jQueryを利用してオリジナルでPHPのプログラムを書いて同様の事をしようとすると、凄い大変な作業かと思いますが、a-blog cms であれば、やってみよう！と思えば数分で実装が可能です。これは一度ご自身で体験してみて下さい。私自身、このエントリーを書きながらカスタマイズして感動しています。

※注意： js-post_include はPOSTで動作しますので、このサンプルで表示されるページャーのリンクは正常に動作しません。その部分は別の方法で実装する必要がありますので、ご了承下さい。

シェアする | Yahoo!ブックマークに登録

関連タグablogcmsjQueryAjax

関連エントリー

上記のエントリーについているタグと関連にするエントリーをいくつかピックアップしています。

login

a-blog cms