WEUI应用,用JS封装常用信息—Progress
Progress 用于上传、下载等耗时并且需要显示进度的场景,用户可以随时中断该操作。
自己与的封装代码,不知道是否合理,只是达到效果是了
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="style/weui.min.css"/>
<link rel="stylesheet" href="example/example.css"/>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$('#btnStartProgress').click(function(){
showProgress();
});
function showProgress(){
var msg;
msg = '\
<div class="weui_progress" id="weuiProgress" style="display: none">\
<div class="weui_progress_bar">\
<div id="prs" class="weui_progress_inner_bar js_progress" style="width: 0%"></div>\
</div>\
<a href="javascript:;" class="weui_progress_opr" id="prsDel">\
<i class="weui_icon_cancel"></i>\
</a>\
</div>\
';
$('#weuiProgressLocation').append(msg);
$("#btnStartProgress").addClass('weui_btn_disabled');
$('#weuiProgress').fadeIn('fast');
$('#prs').animate({
width: "100%"
},2000,function(){
$('#prs').css('width','0');
$('#weuiProgress').fadeOut('fast');
$("#btnStartProgress").removeClass('weui_btn_disabled');
});
$('#prsDel').on('click',function(){
$('#prs').stop();
$('#prs').css('width','0');
$('#weuiProgress').fadeOut('fast');
$("#btnStartProgress").removeClass('weui_btn_disabled');
});
}
})
</script>
</head>
<body ontouchstart>
<div class="bd">
<h1 class="page_title">Progress</h1>
</div>
<div class="bd spacing">
<div id="weuiProgressLocation"></div>
<div class="weui_btn_area">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>
</div>
</div>
</body>
</html>