Progressbar 1.6 追加

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

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

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

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

依存関係

オプション 説明
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

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

メソッド説明
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 )

型:progressbarchange

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

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

型:progressbarcomplete

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

create( event, ui )

型:progressbarcreate

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

 Back to top

© 2010 - 2017 STUDIO KINGDOM