jQuery EasyUI 页面加载等待及页面等待层


Posted in Javascript onFebruary 06, 2017

下面一个代码片段是 easyUI 页面加载等待,代码如下所示:

function ajaxLoading() { 
 var id = "#textboxDiv"; 
 var left = ($(window).outerWidth(true) - 190) / 2; 
 var top = ($(window).height() - 35) / 2; 
 var height = $(window).height() * 2; 
 $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: height }).appendTo(id); 
 $("<div class=\"datagrid-mask-msg\"></div>").html("正在加载,请稍候...").appendTo(id).css({ display: "block", left: left, top: top }); 
} 
function ajaxLoadEnd() { 
 $(".datagrid-mask").remove(); 
 $(".datagrid-mask-msg").remove(); 
}

下面看个工具类 基于easyui的页面等待提示层,即mask

<pre name="code" class="java">/** 
 * 使用方法: 
 * 开启:MaskUtil.mask(); 
 * 关闭:MaskUtil.unmask(); 
 * 
 * MaskUtil.mask('其它提示文字...'); 
 */ 
var MaskUtil = (function(){ 
 var $mask,$maskMsg; 
 var defMsg = '正在处理,请稍待。。。'; 
 function init(){ 
  if(!$mask){ 
   $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body"); 
  } 
  if(!$maskMsg){ 
   $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>") 
    .appendTo("body").css({'font-size':'12px'}); 
  } 
  $mask.css({width:"100%",height:$(document).height()}); 
  var scrollTop = $(document.body).scrollTop(); 
  $maskMsg.css({ 
   left:( $(document.body).outerWidth(true) - 190 ) / 2 
   ,top:( ($(window).height() - 45) / 2 ) + scrollTop 
  }); 
 } 
 return { 
  mask:function(msg){ 
   init(); 
   $mask.show(); 
   $maskMsg.html(msg||defMsg).show(); 
  } 
  ,unmask:function(){ 
   $mask.hide(); 
   $maskMsg.hide(); 
  } 
 } 
}());

效果图:

jQuery EasyUI 页面加载等待及页面等待层

以上所述是小编给大家介绍的jQuery EasyUI 页面加载等待及页面等待层,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
htm调用JS代码
Mar 15 Javascript
js继承的实现代码
Aug 05 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
js 颜色选择插件
Jan 23 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
jQuery表单元素选择器代码实例
Feb 06 #Javascript
You might like
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python字典操作简明总结
2015/04/13 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
家教广告词
2014/03/19 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
领导干部考核评语
2015/01/04 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书