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