首页 > 代码库 > 数据正在加载 关于 遮罩层的添加
数据正在加载 关于 遮罩层的添加
在做项目过程中,发现 如果数据正在加载,点击页面进行别的操作 可能出错(例如 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;width: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="http://www.mamicode.com/gxyt/gxyt007/css/loader.gif" style="margin:0 auto;display:block; margin-top: 160px;"></div>‘; 4 $("body").append(html);
使用方法: 在需要遮罩层的地方 加入$("#zezhao").show(); 取消遮罩层的地方 加入$("#zezhao").hide();
数据正在加载 关于 遮罩层的添加
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。