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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
mailto的使用技巧分享
Dec 21 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
javascript+Canvas实现画板功能
Jun 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使用crypt()函数进行加密
2017/06/08 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python isinstance函数介绍
2015/04/14 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python字典dict常用方法函数实例
2020/11/09 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Java语言的优势
2015/01/10 面试题
个人自我鉴定写法
2013/11/30 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
考核评语大全
2014/04/29 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js