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) { ... }
  );
  

戻り値

• jQuery: jQueryオブジェクト

例

例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); }

ページトップヘ

ページトップヘ