进度条与百分比jquery移动 [英] progress bar with percentage jquery mobile

问题描述

我正在尝试使用jquery mobile开发移动应用程序，因为我正在使用Web服务。我希望它显示一个完成百分比的进度条。

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-Progress-Bar-with-Percentage 插件。

jQuery-Mobile-Progress-Bar- with-Percentage（Tolito Progress Bar）是jQuery Mobile的一个插件，可以创建，管理，启动，停止，恢复和显式设置进度条的值。此外，构造函数提供了在jQuery Mobile标准主题的基础上设置进度条的外部主题和内部填充主题的选项，以显示百分比完成计数器，设置进度条是否具有正常或迷你尺寸，以定义间隔，指定填充频率，配置外部条的最大值，并设置填充内部条的初始值。已使用JavaScript原型链接方法，以便能够链接单独的方法调用，其中每个调用都在同一实例上进行。

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.

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

EDITED: The new version 1.0.3 contains functionality to stop and/or resume the 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.

已使用JavaScript原型链接方法，以便在每次调用时启用单独方法调用的链接在同一个实例上。

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.

以下代码配置，构建和初始化进度条：

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 a normal progress bar inside a dialog:

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

Example with an overlay which includes a normal progress bar:

这篇关于进度条与百分比jquery移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！