Progressbar | jQuery UI 1.10 日本語リファレンス

Progressbar 1.6 追加

http://api.jqueryui.com/1.10/progressbar/

進行状況をプログレスバーとして表示する機能を提供します。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 37
    });
  });
  </script>
</head>
<body>

<div id="progressbar"></div>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Custom Label</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <style>
  .progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
  <script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }

    setTimeout( progress, 3000 );
  });
  </script>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Indeterminate Value</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: false
    });
    $( "button" ).on( "click", function( event ) {
      var target = $( event.target ),
        progressbar = $( "#progressbar" ),
        progressbarValue = progressbar.find( ".ui-progressbar-value" );

      if ( target.is( "#numButton" ) ) {
        progressbar.progressbar( "option", {
          value: Math.floor( Math.random() * 100 )
        });
      } else if ( target.is( "#colorButton" ) ) {
        progressbarValue.css({
          "background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
        });
      } else if ( target.is( "#falseButton" ) ) {
        progressbar.progressbar( "option", "value", false );
      }
    });
  });
  </script>
  <style>
  #progressbar .ui-progressbar-value {
    background-color: #ccc;
  }
  </style>
</head>
<body>

<div id="progressbar"></div>
<div style="padding:10px;">
    <button id="numButton">確定バー(ランダム値を設定)</button>
    <button id="falseButton">非確定バー</button>
    <button id="colorButton">ランダムで色設定</button>
</div>

</body>
</html>

プログレスバーはプロセスが何パーセント完了状態なのかを表示するために設計されたものです。バーは初期状態では、CSSと親コンテナの内部寸法を通して、適したサイズになるようにコーディングされます。

"確定プログレスバー"を、進行状況の値を正確に取得できている状態とします。もし、正しく取得できていないのであれば、"確定プログレスバー"を左から右に埋めるアニメーションを表示すべきではありません。 "「非」確定プログレスバー"状態であることを示すため、それにふさわしいバーを、もしくはローディング回転アニメーション等をユーザーに見せるのが良いでしょう。

プログレスバーはいくつかの機能的なCSSを必要とします。このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。

依存関係

UI Core(jquery.ui.core.js)
Widget Factory

オプション説明

disabled

オプション	説明
disabled	型：`Boolean` 初期値：`false` trueを指定すると、プログレスバーを無効化します。 `$( ".selector" ).progressbar({ disabled: true });` `// getter var disabled = $( ".selector" ).progressbar( "option", "disabled" ); // setter $( ".selector" ).progressbar( "option", "disabled", true );`
max	型:`Number` 初期値:`0` プログレスバーの最大値を設定します。
value	型：`Number` 初期値：`0` プログレスバーの値を指定します。

型：Boolean
初期値：false

trueを指定すると、プログレスバーを無効化します。

$( ".selector" ).progressbar({ disabled: true });

// getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );

// setter
$( ".selector" ).progressbar( "option", "disabled", true );

max

型:Number
初期値:0

プログレスバーの最大値を設定します。

value

型：Number
初期値：0

プログレスバーの値を指定します。

メソッド	説明
destroy()	プログレスバーの機能を完全に削除します。 `$( ".selector" ).progressbar( "destroy" );`
disable()	プログレスバーを無効化します。
enable()	プログレスバーを有効にします。
option( optionName )	戻り値：`Object` optionNameに指定したオプションの現在の値を取得します。 optionName 型：`String` 取得したいオプションの名前を指定します。
option()	戻り値：`PlainObject` オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName, value )	引数のoptionNameのオプションに値を設定します。 optionName 型：`String` 設定したいオプションの名前を指定します。 value 型：`Object` 設定したい値を指定します。
option( options )	オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 option 型：`Object` 設定したいオプションのキーと名前のペアを指定します。
value()	プログレスバーの現在の値を取得します。
value( value )	value 型:`Number` 設定する値を指定します。プログレスバーの現在の値として指定します。
widget()	戻り値：`Object` プログレスバーを含めたjQueryオブジェクトを返します。

イベント説明

change( event, ui )

イベント	説明
change( event, ui )	型：`progressbarchange` プログレスバーの値が変更された際にトリガされます。 `$( ".selector" ).menu({ blur: function( event, ui ) {} });` `$( ".selector" ).on( "menublur", function( event, ui ) {} );`
complete( event, ui )	型：`progressbarcomplete` プログレスバーの値が最大値に達した際にトリガされます。
create( event, ui )	型：`progressbarcreate` プログレスバーが生成された際にトリガされます。

型：progressbarchange

プログレスバーの値が変更された際にトリガされます。

$( ".selector" ).menu({
    blur: function( event, ui ) {}
});

$( ".selector" ).on( "menublur", function( event, ui ) {} );

complete( event, ui )

型：progressbarcomplete

プログレスバーの値が最大値に達した際にトリガされます。

create( event, ui )

型：progressbarcreate

プログレスバーが生成された際にトリガされます。