如何在 html5、phonegap 和 jQuery 中创建进度条

Question

我正在使用 html5、phonegap 和 jquery mobile 创建一个 Android 网络应用程序。我想要做的是在运行将 sql 插入数据库的函数时创建一个进度条，通知客户端已经完成了多少以及还剩下多少。

您能指导我如何开始吗？我已经有了连接和插入数据到sql的功能。

非常感谢。

Answer 1

您可以查看 html5 中新的 进度标记。
此链接将向您显示哪些移动浏览器支持此标记。

Answer 2

就像上面的例子一样，我有一个改进的。

http://docs.jquery.com/UI/Progressbar

可以导入JS和CSS文件在上面的链接中给出，然后您可以在 Android WebApp 上使用以下代码。

    $(function() {

        $("#progressbar").progressbar({ value: 10 });
        setTimeout(updateProgress, 500);

        });

        function updateProgress() {
          var progress;
          progress = $("#progressbar")
            .progressbar("option","value");
          if (progress < 100) {
              $("#progressbar")
                .progressbar("option", "value", progress + 5);
              setTimeout(updateProgress, 500);
          }
        }  

这将在延迟半秒后以 5 的增量移动进度。您可以根据需要修改它。

请告诉我这是否对您有帮助

亲切的问候，

总结

Answer 3

http://docs.jquery.com/UI/Progressbar

只需使用

$("#progressbar").progressbar({ value: ( STORED_DATA / TOTAL_DATA) });

对于 STORED_DATA，尝试分区数据发送到数据库（例如 while 循环）。