`
ronon
  • 浏览: 192761 次
  • 性别: 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在线答题页面.zip

    在我们的在线答题页面中,jQuery将发挥关键作用,帮助我们快速构建用户界面和交互功能。 二、页面结构与样式 1. HTML布局:页面通常分为两部分,左侧显示题目,右侧为答题卡。HTML结构应包含一个用于显示题目的...

    弹出一个层(禁止刷新父页或允许刷新)5种实现方法

    在标题"弹出一个层(禁止刷新父页或允许刷新)5种实现方法"中,我们将探讨五种不同的JavaScript技术来创建这种效果,同时考虑是否在弹出层打开后锁定父页面,以及是否允许用户通过刷新页面来关闭弹出层。 1. **纯CSS...

    超实用的jQuery代码段

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

    jquery mobile注册登录例子

    jQuery Mobile 的一大特点就是使用AJAX技术进行页面间的平滑过渡,通过`data-ajax="false"`禁止AJAX加载,对于需要重新加载整个页面的情况,如登录成功跳转到主页面。 五、注册与登录逻辑 1. 后端接口:后端需提供...

    jquery iscroll下拉插件

    5. **处理数据加载**:在`onPullDown`回调函数中,通常会发起一个Ajax请求获取新的数据,然后将这些数据插入到页面中适当的位置。记得在数据加载完成后调用`myScroll.refresh()`来更新iScroll的状态,以便用户看到新...

    jQuery Mobile十大常用技巧

    为了提高性能,可以使用数据属性(如`data-dom-cache="true"`)缓存页面,减少DOM操作,以及使用`$.mobile.ignoreContentEnabled = true;`防止自动增强某些元素。 掌握这些jQuery Mobile的常用技巧,将有助于提升...

    JQuery无刷新上传

    使用jQuery的`$.ajax()`或`$.post()`方法,设置`url`为服务器端处理文件的接口,`type`为`POST`,`contentType`设为`false`以避免自动设置Content-Type,`processData`设为`false`禁止jQuery处理数据,然后将...

    jquery移动端日期选择插件

    1. 引入jQuery库和插件文件:在HTML文件中添加相应的JavaScript和CSS链接。 2. 初始化插件:通过JavaScript代码初始化日期选择器,指定相应的元素和配置选项。 3. 处理事件:绑定选择日期后的回调函数,进行数据处理...

    JQuery zTree

    5. **异步加载**:对于大型数据集,zTree支持分页和懒加载,只有在需要时才从服务器获取数据,提高页面性能。 6. **多选模式**:zTree允许用户选择多个节点,可以设置单选或多选模式,并获取用户的选择结果。 7. *...

    jQuery自定义标签输入插件Tagator

    3. **初始化插件**:在文档加载完成后,通过jQuery选择器找到需要添加标签功能的元素,并调用`.tagator()`方法进行初始化,可传递配置选项以定制行为。 4. **配置选项**:根据需求调整各种配置项,如是否开启自动...

    jquery 一个框里有内容时,屏蔽其他框

    在jQuery中,"一个框里有内容时,屏蔽其他框"这个需求通常涉及到焦点管理、事件监听以及元素的可见性控制。以下是对这个主题的详细解释: 首先,我们需要理解"框"在这里通常指的是HTML中的输入框,如`&lt;input&gt;`或`...

    jQuery文本框创建关键词标签代码

    在本文中,我们将深入探讨如何使用jQuery来创建一个功能丰富的文本框,该文本框能够动态地生成和管理关键词标签。这个功能广泛应用于各种网站,如社交媒体、博客平台、论坛等,帮助用户方便地组织和分类内容。 首先...

    JQUERY轻松实现talble无刷新排序

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本篇文章将深入探讨如何使用jQuery实现表格无刷新排序,这是一个提高用户体验的有效方法,尤其是在处理大量数据时...

    jquery-combobox完美版,修复默认选择,滚动后无法关闭等问题

    在Web开发中,jQuery Combobox是一款常用的UI组件,它将下拉列表和文本输入框结合在一起,提供了更友好的用户交互体验。然而,实际应用中可能会遇到一些问题,如默认选择不正确、在滚动操作后无法关闭下拉列表等。...

    jQuery星级评分插件RatingStars

    RatingStars插件是基于jQuery构建的,因此在使用之前需要确保页面已经引入了jQuery库。 ### RatingStars主要特性 1. **自定义星星图案**:RatingStars插件允许开发者替换默认的星星图标,可以使用SVG、PNG或任何...

    jquery-1.1.3 效率提高800%

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

    jquery tablesort

    1. **引入jQuery**:首先确保你的页面已经包含了jQuery库,这通常是通过在`&lt;head&gt;`标签内添加链接到jQuery的CDN来完成的。 2. **引入tablesorter**:然后,你需要引入tablesorter的JavaScript文件,通常通过`...

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

    .net+jQuery无刷新多文件上传

    在.NET和jQuery的世界里,无刷新多文件上传是一种提高用户体验的技术,它允许用户在不重新加载整个网页的情况下上传多个文件。这种技术的核心在于利用Ajax异步通信和前端库(如jQuery)来处理用户交互,同时借助后端...

Global site tag (gtag.js) - Google Analytics