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

2024-11-28 16:42:16

下面一个代码片段是 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 加载两次url的原因分析及解决方案

1.传统方式 <span style="font-size:18px;">$(function () { var url = "../Source/Query/jhDataQry.ashx?action=query"; $(dg).datagrid({ url: url, queryParams: { qsrq: qsrq, zzrq: zzrq } }); }) <table id="DataGrid" class="
EasyUI加载完Html内容样式渲染完成后显示

等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验. 新增base-loading.js文件,代码如下 //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loadi
EasyUi combotree 实现动态加载树节点

推荐阅读: 简介EasyUI datagrid editor combogrid搜索框的实现 EasyUi中的Combogrid 实现分页和动态搜索远程数据 easyui 1.2.4例子中并没有给出动态加载树节点的例子,只好自己研究. 从源码中可知可以看出combotree 是继承 combo 和 tree两个控件,所以在展开其下级子节点时,把combotree内置的tree的options选项的url重置成一个动态取选择值的url,代码如下: $('#cc').combotree({ url:
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].
jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g
Jquery EasyUI中弹出确认对话框以及加载效果示例代码

复制代码代码如下: //confirm function Confirm(msg, control) { $.messager.confirm("确认", msg, function (r) { if (r) { return true; } }); return false;} 复制代码代码如下: //Loadfunction Load() { $("<div class=\"da
EasyUI的treegrid组件动态加载数据问题的解决办法

搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的,不过以往利用datagrid的reload方法加参数的方式加载查询结果数据,可是treegrid却只执行reload不能加载带参数的查询结果,可能是做了限制,如下代码不能加载查询结果: 复制代码代码如下: <table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid(
jQuery EasyUI API 中文文档 - EasyLoader 加载器

用法复制代码代码如下: easyloader.base = '../'; // 设置easyui的基本路径 easyloader.load('messager', function(){ // 加载指定的模块 $.messager.alert('Title', 'load ok'); }); 特性名称类型说明默认值 modules object 预定义的模块. locales object 预定义的语言环境. base string easyui的基本路径,必须以'/'结尾. 基本路
EASYUI TREEGRID异步加载数据实现方法

官方提供的treegrid的ex 我给大家贴出来看看吧: 复制代码代码如下: $(function(){ $('#tt').treegrid({ url:'treegrid_data3.json', onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面初始化的. 看看他的JSON: 复制代码代码如下: {"total":117,"rows":[ <SPAN style=&quo
关于 jQuery Easyui异步加载tree的问题解析

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug html中代码是这样的 <ul class="easyui-tree" id="tt"></ul> js中的代码 $(".next-menu:nth-child(1) a").click(function() { var $IDstr = $(this).attr("id"), $treeIDNum = parseInt
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =
jQuery EasyUI 页面加载等待及页面等待层

下面一个代码片段是 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=\"datagr
jQuery基于ajax实现页面加载后检查用户登录状态的方法

本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然
jquery实现页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false). 2.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
jQuery页面加载初始化的3种方法(推荐)

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种方法."); }); 第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQuer
jQuery在页面加载时动态修改图片尺寸的方法

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(
java selenium智能等待页面加载完成示例代码

java selenium 智能等待页面加载完成我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作. 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操作 selenium 中提供了非常简单,智能的方法,来判断元素是否存在. 阅读目录实例要求隐式等待显式等待实例要求实例:set_timeout.html 下面的html 代码, 点击click 按钮5秒后, 页面上会出现一个红色的div
jquery实现在页面加载完毕后获取图片高度或宽度

日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了

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

相关推荐

随机推荐