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

我正在为使用html5，phonegap和jquery mobile的android创建一个web应用程序。我想要做的是创建一个进度条，同时运行一个将sql插入数据库的函数，通知客户端有多少已完成，剩下多少。如何在html5，phonegap和jQuery中创建进度条

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

非常感谢。

来源

2011-10-11 Saint Dee

-1

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

只需使用

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

对于STORED_DATA，尽量的分区发送到数据库中的数据（while循环为例）。

来源

2011-10-11 21:56:39 namar0x0309

我不知道这是否会在web应用工作的机器人。但我相信他们很快就在为移动应用程序开发jQuery ui。 –

我建议你等一下。另一种解决方案是加载简单的20px * 40px（垂直条），并以相同的比例表示进度。（STORED_DATA/TOTAL_DATA）*（NUMBER_OF_VERTICAL_BARS_PER_100_PERCENT）。 – namar0x0309

你不想在jQuery Mobile上添加jQuery UI，即使只是进度条，因为它可能会产生问题。我会推荐一个动画gif来代替。 –

您可以在html5中查看新的progress tag。 This link会告诉你哪些移动浏览器支持这个标签。

来源

2011-10-11 23:25:30 user511530

哇，很好找。绝对是期待android的绝佳特性 –

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

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

可以导入JS和上面的链接给CSS文件，然后你可以使用Android上的Web应用程序下面的代码。

$(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); 
      } 
     }

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

请让我知道如果这有助于你

亲切的问候，

Summved

来源

2012-09-28 11:48:21

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

回答

相关问题