jprog.js

戻る

jprog.jsとは

JavaScriptで、canvas要素を用いてprogress要素のプログレスバーをカスタマイズできます。

ソースに数行書き加えるだけで、progress要素のバーをただの四角いバーから丸などにカスタマイズすることができます。

サンプル

プログレスバーを動かしてみる

※対応ブラウザ：現在のところ（2011年5月）Firefox4.0（不完全）・Operaのみ

この例は、プログレスバーを円にして表示しています。プログラム側は、通常のprogress要素を扱うのと同じようにvalue要素を変更したりするだけで、自動的に円に反映されます。

jprog.jsが使用されると、その場所に自動的にcanvas要素が出現します。

ダウンロード

jprog.js(2.94KB)

使用方法

まず、ページの適当なところでjprog.jsを読み込みます。

<script src="jprog.js" type="text/javascript"></script>

そして、JProg.initを呼び出します。どこでも構いません。

<script>
Jprog.init("クラス名","タイプ");
</script>

ここで、クラス名というのは、progress要素についたclass属性に書かれたクラスのことです。ここにクラス名を書くことで、特定のprogress要素にのみjprogを適用することができます。

すなわち、<progress class="foo"></progress>というprogress要素に適用したい場合、"foo"と指定してやればいいのです。

これを空（""）にするか、あるいは省略してやると、全てのprogress要素に適用されます。

次に、タイプというのは、どんな種類のプログレスバーにするかということです。現在のところ、「円」を表す"circle"しかありません。これも同じく省略でき、その場合円になります。

つまり、「ページ内の全てのprogress要素を円にしたい」という場合は2つとも省略していいので、次のような簡潔な指定になります。

Jprog.init();

その他

実は、第二引数に関数を渡すことでその関数に描画させることが可能、第三引数に連想配列を指定することで細かい設定を変更可能です。細かいことはソースを参照して下さい。

使用している技術

当然、HTML5を使用しています。HTMLProgressElementを扱うように書いてありますが、現在では、まだこれに対応していないブラウザのためにElement#getAttributeを用いて値を取得しています。

また、DOMAttrModifiedイベント・DOMContentLoadedイベントを使用しています。現在（2011年5月）、DOMAttrModifiedイベントに対応しているのはFirefox・OperaだけなのでChromeなどの他のブラウザでは動きませんが、今後他のブラウザでも対応が進むことが期待されます。

更新履歴

2011/05/11 v1.0公開