進度條與百分比jquery移動

Question

我正在嘗試使用jquery mobile開發移動應用程序，因為我正在使用Web服務。 我希望它顯示一個完成百分比的進度條。

Answer 1

完全披露：我已經編寫了這個開源插件

您可以嘗試使用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();

迷你進度條示例：

對話框中具有正常進度條的示例：

包含正常進度條的疊加示例：

Answer 2

嘗試這個：

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