【jsGadget】Indicatorオブジェクトv0.01
次のバージョン→Indicatorオブジェクトv0.04
http://jsgt.org/mt/archives/01/001679.html
AJAX Activity indicators(
http://mentalized.net/journal/2005/11/29/ajax_activity_indicators/)の画像を利用して、Indicator Objectを作ってみました。
インターフェイスは
ProgressBarオブジェクトv0.02と揃えてあります。oj = new jsgt_jsgt_Indicator(src[,id]) でインスタンスojを作ったら、あとは、oj.indi_start() で開始。
oj.indi_stop() で停止。oj.div.style でCSSな修飾となります。
【使用例】
version v0.01 Sample
http://jsgt.org/lib/indicator/jsgt_indicator001/jsgt_indicator001.htm
【サンプル】
ここへtest747のインジケータが出力され、2秒以上待ってから、サーバーからのレスポンスが表示されます
【最新版ディレクトリ】
http://jsgt.org/lib/indicator/
【最新版】 jsgt_indicator001.js
//--jsGadget--------------------------------------------------------------------------
// 最新情報 : http://jsgt.org/mt/01/
// Public Domain 著作権表示義務無し。商用利用、改造、自由。連絡不要。
////
// jsgt_Indicator インジケータ オブジェクト
//
// @author Toshiro Takahashi
// @support http://jsgt.org/mt/archives/01/000743.html
// @source http://jsgt.org/lib/indicator/
// @version 0.02 jsgt_indicator001.js
// @license Public Domain 著作権表示義務無し。商用利用、改造、自由。連絡不要。
// @syntax oj = new jsgt_Indicator(src[,id])
// @sample oj = new jsgt_Indicator('img.gif') //DIVを自動生成する場合
// @sample oj = new jsgt_Indicator('img.gif','nloading') //既存のDIV名で指定する場合
// @param id インジケータ用DIVのID名(省略時は"_indicator"+(new Date()).getTime())
// @method oj.indi_start() インジケータスタート
// @method oj.indi_stop() インジケータスタート
// @property oj.div バーを出力するdivオブジェクト
// @property oj.div.style スタイルオブジェクト(CSSを利用できます)
// @return インジケータオブジェクトのインスタンス
//
// @Thanx Thanx for AJAX Activity indicators http://mentalized.net/activity-indicators/
//
function jsgt_Indicator(src,id)
{
this.div = setIndicatorDIV(src,id)
this.indi_start = indi_start
this.indi_stop = indi_stop
function setIndicatorDIV(src,id)
{
// インジケータを出力するdiv
if(!id){
id = "_indicator"+(new Date()).getTime();//idを生成;
if(document.getElementsByTagName('BODY').length==0)
document.write('<body>')//ダミーのbodyタグ
var creDIV = document.createElement("DIV") ;
this.div = document.body.appendChild(creDIV) ;
this.div.setAttribute("id",id) ;
this.div.style.position = "relative";
this.div.style.top = "0px";
this.div.style.left = "0px";
this.div.style.width = "0px";
this.div.style.height = "0px";
} else {
this.div = document.getElementById(id)
}
// インジケータ用DIVのデフォルト値(インスタンスで上書き変更できます)
this.div.style.margin = '0px' ; //バーのマージン
this.div.style.padding = '0px' ; //バーのパディング
//インジケータ画像のプレロード
this.div.img = new Image()
this.div.img.src = src
// インジケータのデフォルト値
this.div.indi_bar= '|'; //バーのキャラクタ
this.div.indi_interval= 50; //インジケータ インターバル 1/1000秒単位
this.div.indi_count =0; //インジケータカウンター初期値
this.div.indi_count_max =18; //インジケータ カウンターMax
this.div.indi_array= []; //バーのタイマーIDを格納する配列
return this.div
}
//インジケータ スタート
function indi_start()
{
//サイズを与えることで表示する
this.div.style.height ="12px";
this.div.style.width ="auto";
this.div.innerHTML = '<img src="'+this.div.img.src+'">' ;
}
//インジケータ ストップ
function indi_stop()
{
this.div.style.width ="0px";
this.div.style.height ="0px";
this.div.innerHTML = '' ;
}
return this
}
JavaScript++かも日記
【最近の記事】
かも日記
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
ページ全体の読み込み完了まで少々お待ちください...
