ProgressBar
ProgressBarは、進行状況を表すことのできるjQuery UIです。ここでは、スタートボタンをクリックすると、0~100までを10刻みで進行するサンプルを取り上げます。リスト5にjQueryUI_ProgressBarの使用例を、図5に実行結果を示します。
<!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のオプションを、表6にprogressbarのイベントを示します。
オプション | 説明 |
disabled | プログレスバーの有効/無効を設定する(true/false) |
value | プログレスバーの初期化時の値を設定する(0~100) |
イベント | 説明 |
change | プログレスバーの値が変更されたときに呼び出される |
このサンプルでは、progressbarメソッドを使用し、オプション設定でvalueの値を更新しています。これは例えば、スタートボタンなど何らかの実行ボタンを押して、処理時間の進捗状況を表示する場合などに使用できます。
まとめ
今回は、jQueryのユーザインタフェースを拡張するjQuery UIのウィジェットの中から、Dialog、Datepicker、AutoComplete、ProgressBarをご紹介しました。次回は、jQueryプラグインのインストール方法から、Input Hint Overlay、Text input field filter、jQuery Validation などのプラグインを取り上げる予定です。