mui 進(jìn)度控件使用方法：

檢查當(dāng)前容器(container控件)自身是否包含.mui-progressbar類：

當(dāng)前容器包含.mui-progressbar類，則以當(dāng)前容器為目標(biāo)控件，直接顯示進(jìn)度；

否則，檢查當(dāng)前容器的直接孩子節(jié)點(diǎn)是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節(jié)點(diǎn)為目標(biāo)控件，顯示進(jìn)度；

若當(dāng)前容器的直接孩子節(jié)點(diǎn)，均不含.mui-progressbar類,則自動創(chuàng)建進(jìn)度條控件；

如果有多個列表，每個列表在點(diǎn)擊下載控件時，必須要先清除上一個列表的進(jìn)度條顯示效果，因此，需要在點(diǎn)擊列表時，就要做清除進(jìn)度條的事件：

//點(diǎn)擊下載
      jQuery("#downloadWarp").on("tap","li",function(e){
            e.stopPropagation();
            
            //判斷當(dāng)前列表是否含有 .mui-progressbar 這個進(jìn)度條的控件，如果有，則必須刪除這個控件的類名
            var isProgress = jQuery("#downloadNav").find(".mui-progressbar");
            if(isProgress.hasClass("mui-progressbar")){
                 isProgress.removeClass("mui-progressbar");
            }
            //點(diǎn)擊列表時，要把當(dāng)前列表的name及url作為屬性添加到download這個html節(jié)點(diǎn)上，方便下載時使用
            var downloadUrl = jQuery(this).attr("data-url");
            var downloadName = jQuery(this).attr("data-name");
            jQuery("#downloadNav").find("ul>li>span.file-name").text(downloadName);
            jQuery("#downloadNav").find("ul>li.download-url").attr("data-url",downloadUrl);
            
            //彈出框的切換動畫
            mui("#downloadNav").popover("toggle");
      });

點(diǎn)擊download，激活顯示進(jìn)度條的方法。文件下載，需要根據(jù) XMLHttpRequest （初始化構(gòu)造函數(shù)，它是一個客戶端API，是為客戶端與服務(wù)器之間提供一個傳輸服務(wù)的功能，詳情請點(diǎn)擊：http://www.jianshu.com/p/22f8...）中的event來判斷正在下載數(shù)據(jù)，總下載數(shù)據(jù)，是否下載成功等來制作進(jìn)度條，它的參數(shù)為：

event.total   //總的下載數(shù)據(jù)
event.loaded  //正在下載的數(shù)據(jù)
event.currentTarget.responseURL   //通過它是否為空來判斷文件是否下載成功
event.timeStamp  //下載文件所需的時間

向服務(wù)發(fā)送一個HTTP請求

xhr.open("GET", "example.php");
xhr.send();

查詢進(jìn)度信息，需要用到 progress 事件，progress的回調(diào)函數(shù)為：

function updateProgress(event) {
  if (event.lengthComputable) {
      var percentComplete = event.loaded / event.total;
  }
}

上面的代碼中，event.total 是需要傳輸?shù)目傋止?jié)，event.loaded 是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable 不為真，則 event.total 等于0。只有 event.lengthComputable 為真的情況下，才會有進(jìn)度條信息。

下面為請求開始時進(jìn)度條與請求結(jié)束時的進(jìn)度條樣式：

下面是點(diǎn)擊顯示進(jìn)度條的方法：

//顯示進(jìn)度條
      var spanOK = jQuery("");
      jQuery("#downloadNav").find(".download-url").on("tap",function(){
                  //獲取下載文件的url
                  var url = jQuery(this).attr("data-url");

                  //初始化傳輸服務(wù)
                  var xhr = new XMLHttpRequest();
                  //請求數(shù)據(jù)的方法，調(diào)用open()打開這個url
                  xhr.open("GET",url);
                  //初始化傳輸服務(wù)，每個xhr的傳輸都是以 onprogress 的事件開始的
                  xhr.onprogress = function (event) {
                    //只有 e.lengthComputable 為真，才會有進(jìn)度條的信息
                    if (event.lengthComputable) {
                        var total = event.total;
                        var loaded = event.loaded;
                        var isUrl = event.currentTarget.responseURL;
                        var timeStamp = event.timeStamp;

                       // percentComplete 為加載時數(shù)據(jù) / 總數(shù)據(jù)，為一個小于1的值
                        var percentComplete = event.loaded / event.total;

                       // 判斷如果請求的文件url為空，則要提示一個下載失敗的錯誤信息    
                       if(isUrl == "" || isUrl == null){
                            mui.toast("File download failed, please try again!")
                       }
                       // 獲取進(jìn)度條的位置            
                        var container = mui("#downloadNav .progress");

                        //進(jìn)度條值，根據(jù)這個值來顯示進(jìn)度條，因為percentComplete為一個小于1的小數(shù)，而進(jìn)度條是一個100的值，因此將動態(tài)的percentComplete*100取整
                        var progress =  parseInt(percentComplete * 100);
                       // 下載文件所需的時間
                        var time = (new Date(timeStamp)).getTime();
                       
                       // 進(jìn)度條的值更換變量，為重新定義，可以累加，根據(jù)這個累加的值可以看到一個累加顯示的進(jìn)度條
                        var progressNum = progress++;
                       // 初始化進(jìn)度條的值，progress的值 1，進(jìn)度條顯示
                        if (container.progressbar({
                                          progress: 1
                                    }).show()) {
                                    // 給進(jìn)度條設(shè)置進(jìn)度值
                                    container.progressbar().setProgress(progressNum);
                              }
                              var spanOkWarp = jQuery("#downloadNav").find("ul span.file-name");
                              // 判斷當(dāng)前進(jìn)度條是否含有 mui-progressbar 控件，如果有，則給這個控件設(shè)置進(jìn)度值
                              var isProgress = jQuery("#downloadNav").find(".mui-progressbar");
                              if(isProgress.hasClass("mui-progressbar")){
                                   container.progressbar().setProgress(progressNum);
                               }
                              
                              
                              
                            //進(jìn)度加載之后，在另一個頁面打開這個下載好的url
                            setTimeout(function(){
                              mui.openWindow({
                                          url:url
                                    });
                            },time+500);
                        }
                };
                // 發(fā)送這個請求
                xhr.send();
            });

詳細(xì)參考鏈接：你不知道的 XMLHttpRequest，來自簡書

這個方法可以幫我解決進(jìn)度條的顯示問題，請參考。