首页 前端知识 jq使用easyui的Progressbar进度条

jq使用easyui的Progressbar进度条

2024-08-05 23:08:17 前端知识 前端哥 373 588 我要收藏

controlProgressBar方法逻辑:

第一个if判断:参数为"none"时进这儿,传"none"值表示进度条一定存在,这里是想让进度条隐藏

第二个if判断:参数为"block"+进度条dom存在时进这儿,表示想让进度条显示,只需要改变其display属性

第三个判断:参数为"block"+进度条不存在时进这儿,不存在进度条dom要将dom元素添加进页面

//控制进度条的显示与隐藏 传值"none"/"block"
function controlProgressBar(status){
  var ele = "progressOverlay";
  var dom =
    document.getElementById(ele) ||
    window.parent.document.getElementById(ele) ||
    window.parent.parent.document.getElementById(ele) ||
    window.top.document.getElementById(ele) ||
    $("iframe")
      .contents()
      .find("#" + ele)[0];
  if (status === "none") {
    $("#progressBar").progressbar("setValue",100)
    progressTimer && clearInterval(progressTimer)
    // 查询渲染完成 进度条隐藏
    setTimeout(()=>{
      dom.style.display = status;
    },200)
  }else if(dom){
    // 查询渲染开始 显示进度条 并从0开始
    dom.style.display = status;
    $("#progressBar").progressbar("setValue",0)
    // 获取进度条当前值
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer && clearInterval(progressTimer)
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        // 设置进度条当前值
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }else{
    // 进度条没被渲染过
    var loadingHtml = `<div id="progressOverlay" class="progressOverlay pageOverlay">
                  <div class="progressOverlay-cont">
                      <div id="progressBar" class="easyui-progressbar" style="width:100%;height:30px"></div>
                      <div class="progressOverlay-title">正在加载...</div>
                      <div class="progressOverlay-map-bg"></div>
                  </div>
              </div>`;
    // before方法 在被选中元素之前加入
    $("#mapIframe").before(loadingHtml);
    // 动态添加easyui组件 需要刷新
    $.parser.parse($("#progressOverlay"));
    let progressValue = $("#progressBar").progressbar("getValue");
    progressTimer = setInterval(()=>{
      if(progressValue < 90){
        progressValue += Math.floor(Math.random() * 10);
        progressValue = progressValue >= 100? 99:progressValue
        $("#progressBar").progressbar("setValue",progressValue)
      }else{
        clearInterval(progressTimer)
      }
    },200)
  }
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14841.html
标签
easyui
评论
发布的文章

JQuery的选择器有哪些?

2024-08-14 22:08:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!