进度条与百分比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();

迷你进度条示例:

对话框中具有正常进度条的示例:

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