JavaScript++かも日記: 【jsGadget】Indicatorオブジェクトv0.01

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

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

2005年12月29日

【jsGadget】Indicatorオブジェクトv0.01

【Ajax , jsGadget 】

ブックマーク-- Hatena

/ Livedoor

次のバージョン→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 }

【コメント】