如何在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中創建進度條

回答

相關問題