今回のサンプルはページを非同期で読み込みをしたとき、「読み込み中」を表示する機能です。javascript(JQuery)で作成しています。使用用途として、smartphoneなどで、ページの一部を変更した時に、変更部分にロードバーを表示して使用する予定です。

非同期通信時のロードバー

使い方は、上部の「上の領域を変更する」をクリックしてください。今回のサンプルでは、サーバー上での処理を5秒間遅延するようにしています。

変更するにあったって

1. 基本的な設定
基本的な設定は、java.jsにて行います。
//送信先のURL
var URL = “./sample.php”;

//クリックボタンのID名またはクラス名
var TID = “#AjaxTransmission”;

//変更したい領域のID名
var RID = “#MainArea”;

//引数のクラス名
var AClass = “.Argument”;

2. ロードバーを変更する
ロードバーを変更する場合は、java.js内のMakeLoader関数にhtmlを変更してください。レイアウトを変える場合は、index.cssを変更してください。

3. データを送信する
データを送信する場合は、inputのhiddenでclass名を「Argument」にしてください。複数の設置が可能です。name属性がキー名、valueが値になります。引数のクラス名は、java.js内で変更ができます。

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

(感想
作ったのは良かったのだけど・・・
使い方がかなり限定されそう。