mui進捗バー使用解析

mui進捗コントロールの使用方法:
現在のコンテナコントロール自体が含まれているかどうかを確認します.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は転送されたバイトです.もしそうならlengthComputableが真実でなければevent.totalは0に等しい.イベントだけlengthComputableが本物の場合、進捗バー情報が表示されます.
次に、リクエスト開始時のプログレスバーとリクエスト終了時のプログレスバーのスタイルを示します.
次に、進捗バーをクリックして表示する方法を示します.

//     
      var spanOK = jQuery('');
      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、簡書から
この方法は進捗バーの表示問題を解決するのに役立ちますので、参考にしてください.