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("");
      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，来自简书

这个方法可以帮我解决进度条的显示问题，请参考。