jQuery UI逆引きリファレンス
Progressbarウィジェットでプログレスバーを作成するには？
時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Progressbarは、名前のとおり、プログレスバーを実装するためのウィジェットです。（例えば）ファイルのアップロードのような時間のかかる処理を実行する際に、その進捗（しんちょく）状況をユーザーに対して通知するために利用します。
HTML5でも、同じ役割を持つ<progress>要素が用意されていますが、まだまだ未対応のブラウザーを利用しているユーザーも少なくはありません。当面は、Progressbarウィジェットにお世話になる局面も多いでしょう。
基本的なプログレスバー
まずは、基本的なプログレスバーの例からです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Progressbarウィジェット</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// 2プログレスバーを生成
$('#progress').progressbar({
value: 37,
max: 150
});
});
</script>
</head>
<body>
<!--1プログレスバーの表示領域 -->
<div id="progress"></div>
</body>
</html>
|
Progressbarウィジェットを利用するには、プログレスバーの表示領域を<div>要素で準備したうえで（1）、progressbarメソッドを呼び出すだけです（2）。progressbarメソッドで利用できるパラメーターは、以下のとおりです。
| パラメーター | 概要 | デフォルト値 |
|---|---|---|
| max | 最大値 | 100 |
| value | 現在の値 | 0 |
| disabled | 無効にするか | false |
valueパラメーターには「0」～maxパラメーターの値の他、false値を指定することもできます。その場合、以下のような進捗状況が確定しない（indeterminate）プログレスバーを表示します。
プログレスバーに現在の値を表示する
デフォルトの状態では、Progressbarウィジェットはバーを表示するのみで現在の具体的な値は表示しません。もしも値を表示するには、以下のようにする必要があります（以下は、上の例からの差分だけを示します）。
|
<!--2値の表示位置を調整 -->
<style type="text/css">
#loading {
position: absolute;
left: 50%;
}
</style>
……中略……
<script type="text/javascript">
$(function() {
$('#progress').progressbar({
value: 37,
max: 150
});
// 3現在の値（割合）を表示
var per = $('#progress').progressbar('value') /
$('#progress').progressbar('option', 'max')
$('#loading').text(Math.ceil(per * 100) + '％');
});
</script>
</head>
<body>
<!--1現在の値を表示するための領域を準備 -->
<div id="progress">
<div id="loading"></div>
</div>
</body>
</html>
|
値を表示する領域を、プログレスバーの表示領域に入れ子になるように配置します（1）。また、バー中央に値が表示されるように、スタイルを設定しておきましょう（2）。
3では現在の値を算出／出力しています。現在の値はvalueメソッドで、最大値はmaxパラメーターの値はoptionメソッドで、それぞれ取得できます（太字部分）。ここでは取得した値から割合を計算し、その整数値を表示しています。
処理に合わせてプログレスバーを操作する
最後に、プログレスバーをプログラムから操作する方法について紹介します。一般的には、何らかの処理に合わせて、プログレスバーも動的に伸ばしていくのが普通です。以下では、その具体的な方法について示します。
|
$(function() {
// 何度も使うので、変数に退避
var p = $('#progress');
var l = $('#loading');
p.progressbar({
value: 0,
// 1値の変更をラベルにも反映
change: function() {
l.text(p.progressbar('value') + '％');
},
// 2完了時にダイアログボックスを表示
complete: function() {
window.alert('処理を完了しました！');
}
});
// 3100ミリ秒おきにプログレスバーを更新
var id = setInterval(function() {
var v = p.progressbar('value');
p.progressbar('value', ++v);
if (v >= 100) { clearInterval(id) }
}, 100);
});
|
まずは、Progressbarウィジェットの準備からです。changeイベント（1）はプログレスバーの値が変更されたときに、completeイベント（2）は最大値に達したときに、それぞれ発生するイベントです。ここでは、値が変更されたときに、その値を「●○％」の形式でラベルに反映し、100％になったところでダイアログ・ボックスを表示します。
3は、setIntervalメソッドで100ミリ秒おきにプログレスバーの値を更新する例です。値を取得／設定するには、valueメソッドを呼び出します（太字部分）。変数vが100以上になったところで、定期的な処理を終了します。
ここでは、単にプログレスバーを更新しているだけですが、実際にはsetIntervalメソッドのコールバック関数の中で、（例えば）ファイルのアップロード処理のような実処理を記述します。
※以下では、本稿の前後を合わせて5回分（第20回～第24回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
20. Selectableウィジェットで選択可能なリストを作成するには？
マウス・クリックによる単一選択や、マウス・ドラッグによる範囲選択などが実現できるSelectableウィジェットの基本的な使い方を解説。
21. Draggable／Droppableウィジェットでドラッグ＆ドロップ機能を実装するには？
ページ上の指定された要素をマウスでドラッグ＆ドロップできるようにするDraggable／Droppableウィジェットの基本的な使い方を解説。
22. 【現在、表示中】≫ Progressbarウィジェットでプログレスバーを作成するには？
時間のかかる処理の進行状況をユーザーに対して通知できるProgressbarウィジェットの基本的な使い方を解説。
24. ツールチップへの表示内容をカスタマイズするには？
画像を含んだツールチップを表示したり、Ajax経由でツールチップの内容を取得したりできるTooltipウィジェットのパラメーターの指定方法を紹介。
