ProgressBar
ProgressBarは、進行状況を表すことのできるjQuery UIです。ここでは、スタートボタンをクリックすると、0～100までを10刻みで進行するサンプルを取り上げます。リスト5にjQueryUI_ProgressBarの使用例を、図5に実行結果を示します。
リスト5 jQueryUI_ProgressBarの使用例（jQueryUI_ProgressBar.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>プログレスバーサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript">
<!--
var p = 0;
function progress() {
p += 5;
if (p > 100) {
p = 0;
}
$('#progressbar').progressbar('option', 'value', p);
}
$(function () {
// プログレスバーを生成
$("#progressbar").progressbar();
$("#start")
.click(function () {
var start = $(this);
start.button("disable");
var value = 0;
var timer = setInterval(function () {
if (value >= 100) {
clearInterval(timer);
value = 0;
start.button("enable");
} else {
value = value + 10;
}
// プログレスバーの値を変更
$("#progressbar").progressbar("option", "value", value);
}, 1000);
})
.button();
});
</script>
図5 ProgressBarの実行結果
表5にprogressbarのオプションを、表6にprogressbarのイベントを示します。
表5 progressbarのオプション
| オプション | 説明 |
| disabled | プログレスバーの有効／無効を設定する（true／false） |
| value | プログレスバーの初期化時の値を設定する（0～100） |
表6 progressbarのイベント
| イベント | 説明 |
| change | プログレスバーの値が変更されたときに呼び出される |
このサンプルでは、progressbarメソッドを使用し、オプション設定でvalueの値を更新しています。これは例えば、スタートボタンなど何らかの実行ボタンを押して、処理時間の進捗状況を表示する場合などに使用できます。
まとめ
今回は、jQueryのユーザインタフェースを拡張するjQuery UIのウィジェットの中から、Dialog、Datepicker、AutoComplete、ProgressBarをご紹介しました。次回は、jQueryプラグインのインストール方法から、Input Hint Overlay、Text input field filter、jQuery Validation などのプラグインを取り上げる予定です。
