百分比jquery mobile的進度條

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