コンテンツの読み込みに時間がかかっています
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で動作しますので、このサンプルで表示されるページャーのリンクは正常に動作しません。その部分は別の方法で実装する必要がありますので、ご了承下さい。
