4

Web サービスで作業を行っているため、jquery mobile を使用してモバイル アプリケーションを開発しようとしています。進行状況バーに完了率を表示したい。

4

2 に答える 2

8

完全な開示: 私はこのオープン ソース プラグインを作成しました

jQuery-Mobile-Progress-Bar-with-Percentageプラグインを試すことができます。

jQuery-Mobile-Progress-Bar-with-Percentage (Tolito Progress Bar) は、プログレス バーの値を作成、管理、開始、停止、再開し、明示的に設定する jQuery Mobile 用のプラグインです。さらに、コンストラクターは、jQuery Mobile 標準テーマに基づいてプログレス バーの外側のテーマと内側の塗りつぶしテーマを設定するオプション、完了パーセンテージ カウンターを表示するオプション、プログレス バーのサイズを通常サイズにするかミニ サイズにするかを設定するオプションを提供します。外側の棒の最大値を設定し、内側の棒の充填の初期値を設定するために、充填頻度率を指定する間隔。各呼び出しが同じインスタンスで行われる個別のメソッド呼び出しの連鎖を有効にするために、JavaScript プロトタイプ チェーン メソッドが使用されています。

編集済み: 新しいバージョン1.0.3には、進行状況バーを停止および/または再開し、進行状況バーの値を明示的に設定する機能が含まれています。これは、いくつかの AJAX リクエストを実行する必要があり、成功した各応答で、実際の進行状況を表すために進行状況バーの値を明示的に設定する必要がある場合に適しています。さらに、進行状況バーが完了すると、イベントがトリガーされます。

各呼び出しが同じインスタンスで行われる個別のメソッド呼び出しの連鎖を有効にするために、JavaScript プロトタイプ チェーン メソッドが使用されています。

次のコードは、進行状況バーを構成、構築、および初期化します。

TolitoProgressBar('progressbar')
    .setOuterTheme('b')
    .setInnerTheme('e')
    .isMini(true)
    .setMax(100)
    .setStartFrom(0)
    .setInterval(10)
    .showCounter(true)
    .logOptions()
    .build()
    .run();

ミニ プログレス バーの例:

ここに画像の説明を入力

ダイアログ内の通常の進行状況バーの例:

ここに画像の説明を入力

通常の進行状況バーを含むオーバーレイの例:

ここに画像の説明を入力

于 2013-02-10T22:51:09.190 に答える
3

これを試して：

CSS

.progress { position:relative; width:260px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; max-width:240px; border-radius: 3px; background-image: url(../images/pbar-ani.gif); }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }

JS

期間パラメーターを推定時間に変更します。

$(".bar").animate({width:'100%'},{duration:5000,step:function(now,fx){
    var pc = parseInt(now)+'%';
    $(".percent").html(pc);}
});
于 2013-01-02T15:35:02.020 に答える