WEUI应用，用JS封装常用信息—Progress

最新推荐文章于 2021-02-22 08:45:48 发布

zyytaiyame

最新推荐文章于 2021-02-22 08:45:48 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/zyytaiyame/article/details/52679644

版权

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>

zyytaiyame

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
WEUI应用，用JS封装常用信息—Progress

WEUI应用，用JS封装常用信息—Progress Progress 用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。自己与的封装代码，不知道是否合理，只是达到效果是了
复制链接

扫一扫