百分比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);} 
});