Progressbar
解説
処理の進捗状況を視覚的に表示するプログレスバーウィジェットです。
プログレスバーはCSSを使用して柔軟に大きさを変えられるように実装されています。デフォルトでは、親コンテナに合うように大きさが調整されます。
書式
jQuery_Object.progressbar([options]);
依存ファイル
- jquery.ui.core.js
- jquery.ui.widget.js
- jquery.ui.progressbar.js
引数
-
optionsオプション
関数
String: "destroy"、 "disable"、"enable"、"option"、"widget"、"value" のいずれか。
値 | 書式 | 説明 |
"destroy" |
progressbar("destroy") |
プログレスバー機能を完全に破棄します。 |
"disable" |
progressbar("disable") |
プログレスバー機能を一時的に無効にします。 |
"enable" |
progressbar("enable") |
プログレスバー機能を有効にします。 |
"option" |
progressbar("option", optionName, [value]) |
プログレスバーのオプションを設定します。
optionName に、オプション名を指定します。
value に、オプション値を指定します。
(value を指定した場合は、オプションを設定するsetterとして、value を指定しない場合は、オプションを取得するgetterとして動作します。)
|
"option" |
progressbar("option", options) |
プログレスバーのオプションを設定します。
options に、オプションを指定します。(キーと値のハッシュ)
|
"widget" |
progressbar("widget") |
プログレスバーの要素を返します。
|
"value" |
progressbar("value", [value]) |
設定できる値は 0~100 です。(0より小さい値を指定した場合は 0 、100より大きい値を指定した場合は 100に設定されます。)
value(第2引数)を指定した場合は、プログレスバーに現在値を設定するsetterとして動作します。
value(第2引数)を指定しない場合は、プログレスバーの現在値を取得するgetterとして動作します。
|
オプション
Object: 指定したオプションで、要素にプログレスバー機能を追加します。(キーと値のハッシュ)
プロパティ | 型 | 初期値 | 説明 |
disabled |
Boolean |
false |
プログレスバーの有効(false)、無効(true)を設定します。プログレスバーを生成する時の初期値として設定できます。 |
value |
Number |
0 |
プログレスバー初期化時に、プログレスバーの値を設定します。
設定できる値は 0~100 です。(0より小さい値を指定した場合は 0 、100より大きい値を指定した場合は 100に設定されます。)
|
イベント
プロパティ | イベントタイプ | 説明 |
change |
progressbarchange |
プログレスバーの値が変更されたときに呼び出されます。
|
イベントハンドラには、イベントオブジェクトが渡されます。
例: change イベントハンドラ
$(".selector").progressbar({
change: function(event) {
event;
}
});
bind(type, [data], fn) を使用してイベントにバインドするには、上記のイベントタイプを指定します。
例: change イベントにバインドする場合
$(".selector").bind(
"progressbarchange",
function(event) { ... }
);
戻り値
例
例1:プログレスバーの値を 0~100 まで、約10秒間で変化させます。
$(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();
});
Progressbar要素に設定される属性と要素
Progressbar要素には、以下の属性が設定されます。
属性 | 値 |
class | ui-progressbar ui-widget ui-widget-content ui-corner-all |
role | progressbar |
aria-valuemin | 0 |
aria-valuemax | 100 |
aria-valuenow | 0 ~ 100 |
aria-valuenow には、現在の値が動的に設定されます。
また、Progressbar要素には、以下の属性を持った div 子要素が作成されます。
属性 | 値 |
class | ui-progressbar-value ui-widget-header ui-corner-left |
style | width: 0%; |
style 属性のwidth には、現在の値が動的に設定されます。
なお、プログレスバーの外観を変えるには、上記ui-progressbar-value クラスのbackground-image を変更します。
例: プログレスバーにアニメーション画像を設定する。
.ui-progressbar-value { background-image: url(img/pbar-ani.gif); }
|