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
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Angular封装表单控件及思想总结
Dec 11 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
Javascript Math对象
2009/08/13 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
Python下的twisted框架入门指引
2015/04/15 Python
python获取当前日期和时间的方法
2015/04/30 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python如何判断数独是否合法
2016/09/08 Python
Python重新加载模块的实现方法
2018/10/16 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
《云雀的心愿》教学反思
2014/02/25 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
优质服务口号
2014/06/11 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
放假通知怎么写
2015/08/18 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL