ProgressIndicator
Professional な人には(そうでない人も,恐らく)禿しく既出だとおもうけど,prototype.js の記法を使って,ProgressIndicator を制御するクラスを作ってみた。
var ProgressIndicator = Class.create(); ProgressIndicator.prototype = { count : 0, indicator : null, initialize : function(indicatorId) { this.indicator = $(indicatorId); this.indicator.className = "none"; }, run : function() { ++this.count; this.update(false); }, stop : function() { --this.count; this.update(false); }, update : function(reset) { if (reset || this.count < 0) this.count = 0; this.indicator.className = 0 == this.count ? "none" : ""; } };
使い方は,例えば,ここで砂時計アニメーションをゲットして
<img id="id_name" src="hoge.gif" />
という風に,id を指定して HTML に画像を埋め込んでおく。JavaScript を OFF にしている人のことを考慮すると,あらかじめ class="none" としておいた方が無難かも知れない。あと,CSS で .none { display:none } を定義しておく。そして,読み込み時に
var indicator = new ProgressIndicator("id_name");
して,なんか重い処理をする前(例えば XMLHttpRequest する前とか)に indicator.run() を実行。おわったら indicator.stop() を呼ぶ。ちょっとクフウしたのは,インクリメンタルなカウンタを付けて,一つの indicator を共有することができるようにした所と,indicator.update(true) を呼ぶと強制的に indicator を消す(リセットする)ことができるようにした所。update 関数を工夫して,プログレスバーも実現できるようになるとうれしい。
作ってみてだんだん巷の Web アプリケーションの動作原理が分かってきた。JavaScript は,きれいに組めないという苦手意識があったけど,Object.prototype を知ったおかげでようやく糸口を掴めた気がする。ここまでくれば,あとは平坦かも知れないなぁと楽観してみる。