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

摘要:
先将div及img定义好注意:在img内可以用margin-top和margin-left将loading的图片调整到列表正中央。--此处的图层要大于页面--˃display:none;}注意:此处用的id样式,页面初始化即启用,且已在样式内将该div设置为不显示。之后将在js内动态调整它的隐藏与显示属性。当它显示时,将会遮盖住整个body,用户无法对页面进行任何操作。query.action',dataType:"json",type:'POST',success:function{//此处是加载列表数据的代码//数据加载完毕,则关闭遮盖层$.fadeOut;}});}注意:这里用了fadeTo和fadeOut来显示和隐藏div,当然也可以用show和hide。

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

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

有学到一些额外的东西。

先将div及img定义好

<body>
     <div id="loadingDiv">
	<img src="http://t.zoukankan.com/loading.gif"   /> 
     </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;
	     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 数据加载中禁止操作页面》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ios storyboard全解析 (二)使用 Air 热编译 Gin 项目下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

查询离指定日期最近的一条数据(oracle)

select * from (  Select   *   from   t_currency_rate   where f_orig_curr='USD'   and f_dest_curr='RMB'  Order   by   abs(f_date-sysdate) ) a where rownum=1...

Asp.NET笔记(二)---数据绑定技术

第五章 数据绑定技术一、数据绑定语法:用于绑定控件的表达式置于 <%# ......%> 标记之间1、绑定到属性:<%# 属性名%>eg: <%= Hello %>:=它是内联引用方式,可以引用C#代码。<%# 属性名%>:#它可以引用.cs文件中的代码的字段,但这个字段必须初始化后,在页面的Load事件中使...

从.dat文件向Sql Server中批量导入数据

从TXT文本文档向Sql Server中批量导入数据       因为工作的需要,近期在做数据的分析和数据的迁移。在做数据迁移的时候需要将原有的数据导入到新建的数据库中。本来这个单纯的数据导入导出是没有什么问题的,但是客户原有的数据全部都是存在.dat文件中的。所以解决方案如下     一、首先用数据库查看工具Database System Utility...

单表千亿电信大数据场景,使用Spark+CarbonData替换Impala案例

【背景介绍】 国内某移动局点使用Impala组件处理电信业务详单,每天处理约100TB左右详单,详单表记录每天大于百亿级别,在使用impala过程中存在以下问题: 详单采用Parquet格式存储,数据表使用时间+MSISDN号码做分区,使用Impala查询,利用不上分区的查询场景,则查询性能比较差。 在使用Impala过程中,遇到很多性能问题(比如ca...

WPF MVVM实现数据增删改查逻辑全流程详细解析demo

界面总览 gitee 地址:WPFMVVM: 使用mvvm模拟实现数据增删改查 (gitee.com) 本例中包含两个View 界面:MainWindow.xaml 数据列表界面,StudentView.xaml数据新增编辑界面 本例使用了命令绑定MvvmLight RelayCommand模拟数据增删改查操作,适用于WPF入门阅读 效果如下:   程序代...

MongoDB中导出数据为csv文件

1. 打开命令行; 2. 输入如下指令(确保数据库是开着的,下面的数据库名称和集合名称以及域的名称可以根据需求修改) mongoexport -d myDB -c user -f _id,name,password,adress --csv -o ./user.csv 3. 说明: mongoexport -d myDB(myDB修改成...