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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP递归的三种常用方式
2019/02/28 PHP
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
解读ES6中class关键字
2017/11/20 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
小程序实现留言板
2018/11/02 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python实现点对点聊天程序
2018/07/28 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
知识改变命运演讲稿
2014/05/21 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
活动总结模板大全
2015/05/11 职场文书
本科毕业论文致谢词
2015/05/14 职场文书