jQuery EasyUI 基本プラグイン -Progressbar プログレスバー

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.progressbar.defaults を使用してデフォルトの defaults を書き換えます。

プログレスバー（progressbar）は、長時間の操作の進行状況を表示するフィードバックを提供します。進行状況は更新でき、ユーザーに現在実行中の操作を知らせることができます。

依存

  • none

使用法

プログレスバー（ProgressBar）の作成

プログレスバー（ProgressBar）コンポーネントは、HTML マークアップから作成することも、プログラムで作成することもできます。マークアップから作成する方が簡単で、'easyui-progressbar' クラスを <div> タグに追加します。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

JavaScript を使用してプログレスバー（ProgressBar）を作成します。

<div id="p" style="width:400px;"></div>

$('#p').progressbar({
    value: 60
});

値の取得または設定

現在の値を取得し、このコンポーネントに新しい値を設定します。

var value = $('#p').progressbar('getValue');
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
}

プロパティ

名前 型 説明 デフォルト値
width string プログレスバー（progressbar）の幅を設定します。 auto
height number コンポーネントの高さ。このプロパティはバージョン 1.3.2 から使用できます。 22
value number パーセント値。 0
text string コンポーネントに表示されるテキストテンプレート。 {value}%

イベント

名前 パラメータ 説明
onChange newValue,oldValue 値が変更されたときに発生します。
コード例：
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

メソッド

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
resize width コンポーネントのサイズを調整します。
コード例：
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValue none 現在のプログレス値を返します。
setValue value 新しいプログレス値を設定します。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能