`
ronon
  • 浏览: 187050 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

JQuery 数据加载中禁止操作页面

 
阅读更多

比较常见的做法,但对我而言是第一次做,记录一下。

为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime。

有学到一些额外的东西。

 

    先将div及img定义好

 

<body>
     <div id="loadingDiv">
	<img src="loading.gif" style="margin-top:230px;margin-left:700px;" /> 
     </div>
</body>

  

    注意:在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。

 

 

    css样式(重点)

  

  	#loadingDiv {
	    background-color:grey;
	    filter: alpha(opacity=50); <!--IE的透明度-->
	    opacity: 0.1;<!--透明度,数值越大越透明,不要调太小,不然gif图片会特别模糊-->
	    display: none;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 100%;
	    z-index: 100; <!--此处的图层要大于页面-->
	    display:none;
    }

 

    注意:此处用的id样式,页面初始化即启用,且已在样式内将该div设置为不显示。

              之后将在js内动态调整它的隐藏与显示属性。当它显示时,将会遮盖住整个body,

              用户无法对页面进行任何操作。

 

 

   javascript代码:

function loadData(){
		//弹出遮盖层
		$("#loadingDiv").fadeTo(200,0.5);
		
	    $.ajax({
            url: 'xx/xx!query.action',
            dataType:"json",
            type: 'POST',
            success: function(data) { 	

			     //此处是加载列表数据的代码
			     
				 //数据加载完毕,则关闭遮盖层
				 $("#loadingDiv").fadeOut(200);
			     
            }
        });
	}

  

    注意:这里用了fadeTo和fadeOut来显示和隐藏div,当然也可以用 show 和 hide。

  

 

 

分享到:
评论

相关推荐

    超实用的jQuery代码段

    1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的...

    jquery-1.1.3 效率提高800%

    // the options for this ajax request }cache(true) 数据类型: Boolean jQuery 1.2中新添加的参数, 如果设为false,则会强制浏览器不缓存请求的页面。 complete 数据类型: Function 当请求完成时...

    浅谈jQuery绑定事件会叠加的解决方法和心得总结

    关于jQuery的学习中我忽略了一个取消绑定事件.unbind()的使用,也不知道绑定事件会累加的情况,结果因为这个原因,让我在项目上栽了坑。只能说自己还太年轻,需要学习掌握的知识还有很多。 我遇到的问题 我在项目中...

    ExtJS4中文教程2 开发笔记 chm

    JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ================================= 7款强大的Javascript网格插件 Javascript 汉字编码转换 ...

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频

    3.搜索页面中获取搜索的分类下的筛选属性 4.搜索页面价格与属性的获取完成 5.获取商品销量和评论数并根据价格和分类搜索商品 6.商品的排序 7.商品属性的搜索 附件:课程全部资料(课件+源码) 模板 二、ThinkPHP3.2...

    庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术

    2.4.1 调试页面中的javascript脚本(方法一) 22 .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1

    .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 ...

    庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2

    .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 ...

    《JavaScript实例精通》[源代码]

    示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的...

    JavaScript实例精通

    示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的...

    大名鼎鼎SWFUpload- Flash+JS 上传

    什么是SWFUpload?  SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富...SWFpload必须在页面中初始化,一般可以在window.onload事件中...

    wordpreeDUX主题

    jQuery加载 可设置在头部或者底部加载,底部有助于提高页面内容显示速度 文章小部件开启 可选择开启:阅读量、列表评论数、列表作者名字前加网站名称 网站整体变灰 这个不解释,不好的日子或许会用到 分类url去除...

    java面试宝典

    168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? 41 172、Ajax和javascript的区别? 41 Servlet...

    第三代移动WEB内核小程序风口-逐浪CMS2 x3.9.3全面发布

    ■修复:多文件上传,被禁止的上传的文件(exe等危险文件)显示Bug ■扩展:使用新版本Jquery.js(升级到全新的v3.2.1) ■修复:节点链接Bug ■修复:单页--只允许首页生成 ■修复:扩展--运行SQL语句增加二次密码校验 ...

    javapms门户网站源码

    “资源”是指网站前台页面经常需要引用到的图片、css、js、flash等文件,javapms将这些文件都分类存放在了程序指定的目录中,管理员可以系统后台进行上传,删除,修改等管理操作,替代了传统的ftp管理方式。...

    千方百计笔试题大全

    168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? 41 172、Ajax和javascript的区别? 41 Servlet...

    java面试题

    请用java写二叉树算法,实现添加数据形成二叉树功能,并以先序的方式打印出来. 119 84.12. 请写一个java程序实现线程连接池功能? 122 84.13. 编一段代码,实现在控制台输入一组数字后,排序后在控制台输出; 122 ...

Global site tag (gtag.js) - Google Analytics