JavaScript++かも日記: 【Ajax】NowLoadingオブジェクト　その1

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2005年10月23日

【Ajax】NowLoadingオブジェクト　その1

【Ajax 】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

「現在の処理状態を明示する」というわけで、とりあえず、単純なものをひとつ作ってみました。

【サンプル】NowLoadingオブジェクト
now loading用DIVを自動生成する場合
http://jsgt.org/ajax/ref/effects/nowloading/test1.htm　
now loading用DIVを自分でHTML内へ用意する場合
http://jsgt.org/ajax/ref/effects/nowloading/test2.htm

Ajaxのリクエストを発行時に「now loading...」というDIVを表示し、着信すると消えます。oj = new nowLoading() でインスタンスojを作成ます。メソッドは次の2つだけです。

oj.showNL()または、oj.showNL('HTMLメッセージ')で表示、oj.hideNL()で消去です。

oj.showNL()をリクエスト発行時に動作させ、oj.hideNL()をコールバックの着信処理時に動作させてください。

2005.10.23 修正
早速すこしバージョンアップしました。now loading用DIVを自動生成するよりも、自分でHTML内の好きな場所に置きたいというケースに対応しました。あと、「now loading...」のメッセージもoj.showNL (html)の引数としてカスタマイズできます。＊あとで、id = "_nowLoading";を id = "_nowLoading"+(count++);とかに変更します。

//// // Now loading オブジェクト // // @author Toshirou Takahashi http://jsgt.org/mt/archives/01/000539.html // @version 0.02 // @license 著作権表示義務無し。商用利用、改造、自由。連絡不要。 // @sample oj = new nowLoading() //DIVを自動生成する場合 // @sample oj = new nowLoading('nloading') //DIV名で指定する場合 // @param id nowloading用DIVのID名(デフォルト_nowLoading) // @return now loadingオブジェクトのインスタンス // // function nowLoading(id){ if(!id){ id = "_nowLoading"; var creNowloadingDIV = document.createElement("DIV") ; this.nlDIV = document.body.appendChild(creNowloadingDIV) ; this.nlDIV.setAttribute("id",id) ; } else { this.nlDIV = document.getElementById(id) } //表示　リクエスト発行時に動作させてください //@param html 表示するメッセージ(デフォルト now loading... ) this.showNL = function (html){ var html=(html)?html:" now loading... "; this.nlDIV.innerHTML = " "+html+" " } //消去　コールバック着信処理時に動作させてください this.hideNL = function (){ this.nlDIV.innerHTML = "" } }

【コメント】