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.loaded
//正在下载的数据
event.currentTarget.responseURL
//通过它是否为空来判断文件是否下载成功
event.timeStamp
//下载文件所需的时间

向服务发送一个HTTP请求

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

相关文章: