zoukankan      html  css  js  c++  java
  • 数据正在加载 关于 遮罩层的添加

    在做项目过程中,发现 如果数据正在加载,点击页面进行别的操作 可能出错(例如 tab 页切换时,操作太快,数据填入了错的tab页 ,当然这种情况是指数据不随tab页的点击而加载)

    解决1。想到点击一个tab页禁止 其它tab的可点击性  

     如为button (表单类 disabled=true)  

    在登录页面中 常用此效果来处理 防止用户填完数据后 多次点击登录 进行数据库访问 (用户提交一次后 将登录按钮设为不可点 请求返回后在放开)

     如为a 标签  需要三步  1. 在onclick事件 return false;

                                         2.取消href

                                         3.取消冒泡事件

              2。加入遮罩层    

        js 入下:

                        //加载数据时 加入遮罩层 数据成功加载后 遮罩层消失 避免数据加载过程中 点击页面出错

    1 //加载数据时 加入遮罩层 数据成功加载后 遮罩层消失 避免数据加载过程中 点击页面出错
    2 $("body").css({"position":"relative"});
    3 var html='<div id="zezhao" style="display:none;100%;height:100%;position:absolute;left:0;top:0;z-index:100;filter:alpha(opacity=10);opacity:.1;background:#000;overflow:hidden;"><img class="load_img" src="/gxyt/gxyt007/css/loader.gif"alt="" style="margin:0 auto;display:block; margin-top: 160px;"></div>';
    4 $("body").append(html);

                 使用方法: 在需要遮罩层的地方 加入$("#zezhao").show();  取消遮罩层的地方 加入$("#zezhao").hide();

  • 相关阅读:
    BZOJ 5418: [Noi2018]屠龙勇士 EXCRT+multiset
    CF1033D Divisors Pollard-rho
    BZOJ 3782: 上学路 Lucas+ExCRT+容斥+dp
    BZOJ 1951: [Sdoi2010]古代猪文 ExCRT+欧拉定理+Lucas
    Activiti介绍(一)
    Centos7卸载FastDFS6.1卸载(六)
    FastDFS整合SpringBoot(五)
    FastDFS整合nginx模块报错
    SpringBoot怎么访问html文件
    FastDFS整合普通Maven项目(四)
  • 原文地址:https://www.cnblogs.com/ylboke/p/7120216.html
Copyright © 2011-2022 走看看