Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Prototype でプログレスバーの表示 (jsProgressBarHandler.js)

Sep082007
Vote:
http://bizcaz.com/archives/2007/09/08-213923.php
Categories: prototype
Tags: prototype
Social Bookmark

Prev Page: Lightboxのように透過レイヤー表示してみる
Next Page: Ajaxでアクセス・ランキングを表示する４

こんにちわ^^

各地で猛威を振るった台風 9 号は、わたしが寝てる間に通り過ぎてくれたようで、幸い大きな影響ありませんでした。よかったです (;￣∇￣A ほっ
昨日の朝の通勤電車は遅れなどでましたが、とりえあず普通に通勤できたので何よりです。

いつもなら関東の内陸側を通らず、太平洋側へと逸れることがほとんどでしたが、今回の台風 9 号は気合入りまくりっ!!
今は東北あたりにいるようです。大きな災いがありませんように･･･。
台風について

さて、最近またドライアイの影響で記事が滞ってる bzbell ですが、今日は少し良さげなのでyoumosさんとこで紹介されてた、JavaScriptでプログレスバーを簡単に実装する（jsProgressBarHandler）を実際に使ってみましたのでご紹介です。

以前、わたしのサイトでは CSS のみで表示する、CSSでバーグラフ表示をご紹介しました。
今回は prototype.js を併用するので、アニメーションしながらプログレス表示させることができます。
デモ

jsProgressBarHandler のダウンロード

jsProgressBarHandler.js は、Bram.us さんからダウンロードできます。
prototype.js も同梱されてますので、ディレクトリを作成(たとえば、progressbar/)して、その中にすべてのファイルをアップロードして、ブラウザ上から index.html を表示(たとえば、 progressbar/index.html )すればサンプルを見ることができます。

jsProgressBarHandler の使い方

まず、jsProgressBarHandler.js の使い方の説明です。
使い方はカンタンで、サンプルも同梱されてますので分かりやすいかと思います。

<span class="progressBar" id="element1">15%</span>
<a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','+5');return false;">
<img src="add.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='Select Options'" onmouseover="$('Text1').innerHTML ='Add 5%'"/>
</a>

上記はサンプルの一部を抜粋したものです。
青い字の部分がプログレスバーの初期値になります。JavaScript ロード時にページ内の <span class="progressBar"> が検索されて、ここで指定されたパーセンテージを初期値としています。

ピンクの字の部分でプログレスバーのイメージを選択しています。element1 ～ element4 が選択可能です。
複数のプログレスバーを表示する場合には、id 属性を class 属性に変更する必要がありそうですね (;￣∇￣A

赤い字の部分で任意のパーセンテージを表示(変更)することができます。
具体的には、カーキ色の部分がプログレスバーの ID になります。この ID をページ内でユニーク(唯一)なものにすることで、複数のプログレスバーを表示させることが可能です。
緑の字の部分で表示させたいプログレスバーのパーセンテージを指定しています。
たとえば、以下のような指定が可能なようです。

60% を表示したい場合
1. myJsProgressBarHandler.setPercentage('element1', '60');
表示できる範囲は、0 ～ 100 の間で指定します。それ以上、またはそれ以下を指定した場合無視されます。
現在のパーセンテージに +12% したい場合
1. myJsProgressBarHandler.setPercentage('element1', '+12');
現在のパーセンテージから +12% した値が表示されます。
現在のパーセンテージに -10% したい場合
1. myJsProgressBarHandler.setPercentage('element1', '-10');
現在のパーセンテージから -10% した値が表示されます。