プログレスバー.js
プログレスバー.js は、プログレスバーを表示するライトウェイトなJavaScriptライブラリーです。JavaScriptからメソッドを実行することで、パーセンテージの変更などを制御することができます。また、静的に表示させるだけであれば、JavaScriptコードなしに、class属性に値を追加するだけで、プログレスバーを表示することができます。このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。［プログレスバー.jsのサンプル］
ダウンロード
| Release | Date | Size (byte) | Download |
|---|---|---|---|
| 1.0.1 | 2009-05-28 | 16,639 | progress_1_0_1.zip |
対応ブラウザー
- Internet Explorer 6 以上
- Firefox 2.0以上
- Opera 9.0以上
- Safari 3.0以上（もしかしたら2.0でも動作するかもしれませんが、未確認です。）
- Google Chrome 0.3以上
使い方
progress_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。プログレスバーを表示させたいHTMLには次のように、div要素を記述しておきます。
上記タグは次の点に注意してください。
- 必ずdiv要素を用意してください。divではない要素ではブログレスバーは表示されません。
- id属性は必須です。id属性値をセットしてください。
HTMLのhead要素内に、次のJavaScriptコードを記述してください。
<script type="text/javascript">
window.onload = function() {
var p = {
to: 50
};
var o = new html5jp.progress("sample1", p);
o.draw();
};
</script>
このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダ はどこに設置しても構いません。html5jpフォルダの設置場所に合わせてprogress.jsをロードするscript要素のsrc属性を書き換えてください。
プログレスバー描画処理は、progress.jsをロードした後に、script要素内に記述します。プログレスバー描画処理は、jsファイルとしてHTMLファイル と分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。
では、コードをひとつずつ見ていきましょう。プログレスバー描画処理では、まず最初にパラメータをオブジェクトとして用意します。
to: 50
};
これは、プログレスバーが50%となるよう指示しています。ここではひとつのパラメータしか定義していませんが、そのほかにも多数のパラメータが用意されています。詳細については後述します。
次に、プログレスバー描画処理オブジェクトを生成します。
ここでは変数名を o としましたが、変数名は何でも構いません。以下、プログレスバー描画オブジェクトの変数名を o として説明します。
オブジェクトを生成する際に2つの引数を与えます。1つ目には、プログレスバーを表示させたいdiv要素のid属性の値です。ここでは "sample" としています。2つ目の引数には、先ほど用意したパラメータを格納したオブジェクトを与えます。
このプログレスバー描画処理オブジェクトには、さまざまなメソッドが定義されています。以降、このオブジェクト o を通して、メソッドを呼び出すことで、プログレスバーを制御します。
オブジェクトが用意できたら、最後に drawメソッドを呼び出します。引数は不要です。
これで、下図のように、id属性値が "sample" のdiv要素に、50% の状態を表すプログレスバーが表示されます。［実際のサンプルを見る］
パラメータ
プログレスバー描画オブジェクトを生成する際に、第2引数に与えることができるパラメータは下表の通りです。
| パラメータ名 | 初期値 | 説明 |
|---|---|---|
| width | 300 | プログレスバーの横幅を数値として指定します。単位はピクセルです。 |
| height | 12 | プログレスバーの縦幅を数値として指定します。単位はピクセルです。 |
| full | 100 | 100%に相当する値を指定します。例えば、full に 500 が、to に 300 が指定されると、パーセンテージは自動的に計算され、60% となります。 |
| from | 0 | プログレスバーを表示する際、fromに指定した値から、to に指定した値に達するまで、アニメーションします。ただし、animation に 0 が指定された場合は、from の値は無視されます。 |
| to | 0 | プログレスバーに最終的に表示させたい値を指定してください。もし full に 100 以外の値がセットされていると、to の値からパーセンテージは自動計算されます。 |
| animation | 5 | アニメーション速度。0～10の数値を指定してください。数値が大きいほど、速度が速くなります。0を指定すると、アニメーションしません。 |
| nd | 0 | パーセンテージの小数点以下の桁数を表します。0～8の数値を指定してください。0を指定すると整数のみがパーセントとして表示されます。ただし、パーセントの数値に小数点以下がない場合は、たとえ nd に 1 以上の値を指定しても、小数点以下は表示されません。 |
| frm_bgc | "#cccccc" | 背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| frm_bdtc | null | プログレスバーの枠の上側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| frm_bdrc | null | プログレスバーの枠の右側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| frm_bdbc | null | プログレスバーの枠の下側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| frm_bdlc | null | プログレスバーの枠の左側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| frm_bdw | "1px" | プログレスバーの枠の線の太さを表します。"1px" のようにpxを付けて指定してください。 |
| bar_bgc | "#039ab2" | プログレスバーのバーの背景色を色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| bar_bdtc | null | プログレスバーのバーの上側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| bar_bdrc | null | プログレスバーのバーの右側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| bar_bdbc | null | プログレスバーのバーの下側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| bar_bdlc | null | プログレスバーのバーの左側の枠線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| bar_bdw | "1px" | プログレスバーのバーの線の太さを表します。"1px" のようにpxを付けて指定してください。 |
| per_shw | true | パーセンテージを表示するかどうかを制御します。表示したい場合は true を、非表示にしたい場合は false を指定してください。 |
| per_ftc | "white" | パーセンテージ文字の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| per_ftf | "Arial,sans-serif" | パーセンテージ文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。 |
| per_fts | "11px" | パーセンテージ文字のサイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。 |
| per_sd | true | パーセンテージ文字の影を表示するかどうかを制御します。表示したい場合は true を、非表示にしたい場合は false を指定してください。 |
| per_sdc | "#101010" | パーセンテージ文字の影の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。 |
| gradation | true | グラデーションを有効にするかどうかを制御します。有効にしたい場合は true を、無効にしたい場合は false を指定してください。 |
横幅 400、縦幅 16のサイズで、値が 10.4 から 62.8 に至るまで、速度を 1 （かなりゆっくり）でアニメーションし、パーセントを小数点以下1位まで表示し、バーの色を深紅にしたプログレスバーを作成するには、以下のコードになります。［実際のサンプルを見る］
width: 400,
height: 16,
from: 10.4,
to: 62.8,
bar_bgc: "#990000",
nd: 1,
animation: 1
};
var o = new html5jp.progress("sample", p);
o.draw();
このように、デフォルト値から変更したいパラメータを指定して、オブジェクトを生成してください。
メソッド
プログレスバー描画オブジェクトには、さまざまなメソッドが定義されています。
| メソッド | 説明 |
|---|---|
| draw() | プログレスバーを描画します。このメソッドが呼び出されると、もしすでにプログレスバーが描画されている場合には削除され、その時点のパラメータ値を使って、再度、描画します。 |
| incr(num) | 第一引数 num に指定した値を加算します。 |
| decr(num) | 第一引数 num に指定した値を減算します。 |
| get_per() | 現在のパーセンテージを返します。 |
| get_val() | 現在の値を返します。 |
| set_val(val) | 第一引数 val に指定した値に、プログレスバーをセットします。 |
| set_param(k, v) | 第一引数 k に指定したパラメータ名の値を、第二引数 v に指定した値にセットします。このメソッドで指定できるパラメータ名は、"animation" と "nd" のみです。本来、パラメータは、プログレスバー描画オブジェクトを生成する際にセットするものですが、これら2つのパラメータについては、プログレスバー描画オブジェクトを生成した後でも、このメソッドを使って変更することができます。 |
| reset() | プログレスバー描画オブジェクトを生成した際に指定したパラメータを使って、プログレスバーを再描画します。 |
各メソッドの使い方については、サンプルのHTMLソースをご覧ください。［プログレスバー.jsのサンプル］
class属性による静的描画
このライブラリーは、JavaScriptコードを使って動的に描画するだけではなく、div要素のclass属性にパラメータを指定して静的に描画することも可能です。
横幅 400、縦幅 16のサイズで、値が 62.4、アニメーションは無効、パーセントを小数点以下1位まで表示し、バーの色を緑にしたプログレスバーを作成するには、以下のHTMLタグを記述するだけです。head要素内でscript要素を使って progress.js をロードしておく必要はありますが、プログレスバーを描画するためにJavaScriptコードを用意する必要はありません。［実際のサンプルを見る］
このdiv要素には、id属性を必ず指定してください。また、class属性には、まず最初に html-jp-progress と記述し、続いて、半角スペースを入れてから [] 内にパラメータ値をセットします。[] 内は、前述のパラメータ表で規定された名前と値を : （コロン）で区切ります。そして、名前と値のペア－を; （セミコロン）で区切ります。[] 内で、半角スペースやダブルクォーテーション、シングルクォーテーションを使わないでください。
バージョンアップ履歴
2009-05-28
- class属性による静的描画の場合、1ページに1個しかプログレスバーを描画できなかった不具合を改修。
2009-05-14
- ver 1.0.0 リリース
著作権・謝辞
著作権
Copyright 2007-2009 HTML5.JP
当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。