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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
js实现分页功能
May 24 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
学习Vue组件实例
Apr 28 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS高级笔记
2011/07/13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python socket处理client连接过程解析
2020/03/18 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
广州盈通面试题
2015/12/05 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
同事吵架检讨书
2014/02/05 职场文书
手机银行营销方案
2014/03/14 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书