javascript 带有百分比 jquery mobile 的进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14120960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
progress bar with percentage jquery mobile
提问by B.M.A
I am trying to develop a mobile application using jquery mobile, as I am doing the work with the web service. I want it to display a progress bar with percentage of completion.
我正在尝试使用 jquery mobile 开发移动应用程序，因为我正在使用 Web 服务。我希望它显示一个带有完成百分比的进度条。
回答by Apostolos Emmanouilidis
Full disclosure: I have written this open source plugin
完全披露：我已经编写了这个开源插件
You may try the jQuery-Mobile-Progress-Bar-with-Percentageplugin.
你可以试试jQuery-Mobile-Progress-Bar-with-Percentage插件。
The jQuery-Mobile-Progress-Bar-with-Percentage (Tolito Progress Bar) is a plugin for jQuery Mobile which creates, manages, starts, stops, resumes and explicitly sets the value of a progress bar. In addition the constructor provides the options to set the progress bar's outer theme and inner filling theme on the basis of the jQuery Mobile standard themes, to show a percentage completion counter, to set whether the progress bar has normal or mini size, to define the interval which specifies the filling frequency rate, to configure the max value of the outer bar and set the initial value of the filling inner bar. The JavaScript prototype chaining method has been used in order to enable the chaining of separate method calls where each call is made on the same instance.
jQuery-Mobile-Progress-Bar-with-Percentage（Tolito Progress Bar）是 jQuery Mobile 的插件，它创建、管理、启动、停止、恢复和显式设置进度条的值。此外，构造函数提供了在jQuery Mobile标准主题的基础上设置进度条外层主题和内层填充主题的选项，显示百分比完成计数器，设置进度条是普通还是迷你尺寸，定义interval 指定填充频率率，用于配置外条的最大值和设置填充内条的初始值。JavaScript 原型链接方法已被用于启用单独方法调用的链接，其中每个调用都在同一实例上进行。
EDITED:The new version 1.0.3contains functionality to stop and/or resumethe progress bar and to explicitly set the progress bar's value. This fits to the cases where some AJAX requests need to be performed and in each successful response the progress bar value has to be set explicitly in order to represent the actual progress status. Furthermore an event is triggered when the progress bar is completed.
编辑：新版本1.0.3包含停止和/或恢复进度条以及显式设置进度条值的功能。这适用于需要执行某些 AJAX 请求并且在每个成功响应中必须明确设置进度条值以表示实际进度状态的情况。此外，当进度条完成时会触发一个事件。
The JavaScript prototype chaining method has been used in order to enable the chaining of separate method calls where each call is made on the same instance.
JavaScript 原型链接方法已被用于启用单独方法调用的链接，其中每个调用都在同一实例上进行。
The following piece of code configures, builds and initializes a progress bar:
以下代码配置、构建和初始化进度条：
TolitoProgressBar('progressbar')
.setOuterTheme('b')
.setInnerTheme('e')
.isMini(true)
.setMax(100)
.setStartFrom(0)
.setInterval(10)
.showCounter(true)
.logOptions()
.build()
.run();
Example with mini progress bar:
带有迷你进度条的示例：
Example with a normal progress bar inside a dialog:
对话框中带有正常进度条的示例：
Example with an overlay which includes a normal progress bar:
包含普通进度条的叠加示例：
回答by A. Magalh?es
Try this:
试试这个：
CSS
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
JS
Change duration parameter to your estimated time.
将持续时间参数更改为您的估计时间。
$(".bar").animate({width:'100%'},{duration:5000,step:function(now,fx){
var pc = parseInt(now)+'%';
$(".percent").html(pc);}
});
