javascript - 带有百分比的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标准主题的基础上设置进度条的外部主题和内部填充主题的选项，显示百分比完成计数器，设置进度条是正常还是迷你尺寸，定义interval 指定填充频率，配置外条的最大值和设置填充内条的初始值。已使用 JavaScript 原型(prototype)链接方法来启用单独方法调用的链接，其中每个调用都在同一实例上进行。

已编辑:新版本 1.0.3 包含停止和/或恢复进度条以及明确设置进度条值的功能。这适用于需要执行某些 AJAX 请求并且在每个成功响应中必须显式设置进度条值以表示实际进度状态的情况。此外，当进度条完成时会触发一个事件。

已使用 JavaScript 原型(prototype)链接方法来启用单独方法调用的链接，其中每个调用都在同一实例上进行。

以下代码配置、构建和初始化进度条:

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

带有迷你进度条的示例:

对话框中带有普通进度条的示例:

带有包含正常进度条的叠加层的示例: