【Ajax】NowLoadingオブジェクト その1
「現在の処理状態を明示する」というわけで、とりあえず、単純なものをひとつ作ってみました。
【サンプル】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 = ""
}
}
JavaScript++かも日記
【最近の記事】
かも日記
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
ページ全体の読み込み完了まで少々お待ちください...
