mui進度條使用解析

mui 進度控件使用方法：

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

• 當前容器包含.mui-progressbar類，則以當前容器爲目標控件，直接顯示進度；
• 不然，檢查當前容器的直接孩子節點是否包含.mui-progressbar類，若存在，則以遍歷到的第一個含有.mui-progressbar類的孩子節點爲目標控件，顯示進度；
• 若當前容器的直接孩子節點，均不含.mui-progressbar類,則自動建立進度條控件；

若是有多個列表，每一個列表在點擊下載控件時，必需要先清除上一個列表的進度條顯示效果，所以，須要在點擊列表時，就要作清除進度條的事件：

//點擊下載
      jQuery('#downloadWarp').on('tap','li',function(e){
            e.stopPropagation();
            
            //判斷當前列表是否含有 .mui-progressbar 這個進度條的控件，若是有，則必須刪除這個控件的類名
            var isProgress = jQuery('#downloadNav').find('.mui-progressbar');
            if(isProgress.hasClass('mui-progressbar')){
                 isProgress.removeClass('mui-progressbar');
            }
            //點擊列表時，要把當前列表的name及url做爲屬性添加到download這個html節點上，方便下載時使用
            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');
      });

點擊download，激活顯示進度條的方法。文件下載，須要根據 XMLHttpRequest （初始化構造函數，它是一個客戶端API，是爲客戶端與服務器之間提供一個傳輸服務的功能，詳情請點擊：http://www.jianshu.com/p/22f8...）中的event來判斷正在下載數據，總下載數據，是否下載成功等來製做進度條，它的參數爲：

event.total   //總的下載數據
event.loaded  //正在下載的數據
event.currentTarget.responseURL   //經過它是否爲空來判斷文件是否下載成功
event.timeStamp  //下載文件所需的時間

向服務發送一個HTTP請求

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

查詢進度信息，須要用到 progress 事件，progress的回調函數爲：

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

上面的代碼中，event.total 是須要傳輸的總字節，event.loaded 是已經傳輸的字節。若是event.lengthComputable 不爲真，則 event.total 等於0。只有 event.lengthComputable 爲真的狀況下，纔會有進度條信息。

下面爲請求開始時進度條與請求結束時的進度條樣式：

下面是點擊顯示進度條的方法：

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

                  //初始化傳輸服務
                  var xhr = new XMLHttpRequest();
                  //請求數據的方法，調用open()打開這個url
                  xhr.open('GET',url);
                  //初始化傳輸服務，每一個xhr的傳輸都是以 onprogress 的事件開始的
                  xhr.onprogress = function (event) {
                    //只有 e.lengthComputable 爲真，纔會有進度條的信息
                    if (event.lengthComputable) {
                        var total = event.total;
                        var loaded = event.loaded;
                        var isUrl = event.currentTarget.responseURL;
                        var timeStamp = event.timeStamp;

                       // percentComplete 爲加載時數據 / 總數據，爲一個小於1的值
                        var percentComplete = event.loaded / event.total;

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

                        //進度條值，根據這個值來顯示進度條，由於percentComplete爲一個小於1的小數，而進度條是一個100的值，所以將動態的percentComplete*100取整
                        var progress =  parseInt(percentComplete * 100);
                       // 下載文件所需的時間
                        var time = (new Date(timeStamp)).getTime();
                       
                       // 進度條的值更換變量，爲從新定義，能夠累加，根據這個累加的值能夠看到一個累加顯示的進度條
                        var progressNum = progress++;
                       // 初始化進度條的值，progress的值 1，進度條顯示
                        if (container.progressbar({
                                          progress: 1
                                    }).show()) {
                                    // 給進度條設置進度值
                                    container.progressbar().setProgress(progressNum);
                              }
                              var spanOkWarp = jQuery('#downloadNav').find('ul span.file-name');
                              // 判斷當前進度條是否含有 mui-progressbar 控件，若是有，則給這個控件設置進度值
                              var isProgress = jQuery('#downloadNav').find('.mui-progressbar');
                              if(isProgress.hasClass('mui-progressbar')){
                                   container.progressbar().setProgress(progressNum);
                               }
                              
                              
                              
                            //進度加載以後，在另外一個頁面打開這個下載好的url
                            setTimeout(function(){
                              mui.openWindow({
                                          url:url
                                    });
                            },time+500);
                        }
                };
                // 發送這個請求
                xhr.send();
            });

詳細參考連接：你不知道的 XMLHttpRequest，來自簡書

這個方法能夠幫我解決進度條的顯示問題，請參考。