比较常见的做法,但对我而言是第一次做,记录一下。
为了把找来的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. HTML布局:页面通常分为两部分,左侧显示题目,右侧为答题卡。HTML结构应包含一个用于显示题目的...
在标题"弹出一个层(禁止刷新父页或允许刷新)5种实现方法"中,我们将探讨五种不同的JavaScript技术来创建这种效果,同时考虑是否在弹出层打开后锁定父页面,以及是否允许用户通过刷新页面来关闭弹出层。 1. **纯CSS...
1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的...
jQuery Mobile 的一大特点就是使用AJAX技术进行页面间的平滑过渡,通过`data-ajax="false"`禁止AJAX加载,对于需要重新加载整个页面的情况,如登录成功跳转到主页面。 五、注册与登录逻辑 1. 后端接口:后端需提供...
5. **处理数据加载**:在`onPullDown`回调函数中,通常会发起一个Ajax请求获取新的数据,然后将这些数据插入到页面中适当的位置。记得在数据加载完成后调用`myScroll.refresh()`来更新iScroll的状态,以便用户看到新...
为了提高性能,可以使用数据属性(如`data-dom-cache="true"`)缓存页面,减少DOM操作,以及使用`$.mobile.ignoreContentEnabled = true;`防止自动增强某些元素。 掌握这些jQuery Mobile的常用技巧,将有助于提升...
使用jQuery的`$.ajax()`或`$.post()`方法,设置`url`为服务器端处理文件的接口,`type`为`POST`,`contentType`设为`false`以避免自动设置Content-Type,`processData`设为`false`禁止jQuery处理数据,然后将...
1. 引入jQuery库和插件文件:在HTML文件中添加相应的JavaScript和CSS链接。 2. 初始化插件:通过JavaScript代码初始化日期选择器,指定相应的元素和配置选项。 3. 处理事件:绑定选择日期后的回调函数,进行数据处理...
5. **异步加载**:对于大型数据集,zTree支持分页和懒加载,只有在需要时才从服务器获取数据,提高页面性能。 6. **多选模式**:zTree允许用户选择多个节点,可以设置单选或多选模式,并获取用户的选择结果。 7. *...
3. **初始化插件**:在文档加载完成后,通过jQuery选择器找到需要添加标签功能的元素,并调用`.tagator()`方法进行初始化,可传递配置选项以定制行为。 4. **配置选项**:根据需求调整各种配置项,如是否开启自动...
在jQuery中,"一个框里有内容时,屏蔽其他框"这个需求通常涉及到焦点管理、事件监听以及元素的可见性控制。以下是对这个主题的详细解释: 首先,我们需要理解"框"在这里通常指的是HTML中的输入框,如`<input>`或`...
在本文中,我们将深入探讨如何使用jQuery来创建一个功能丰富的文本框,该文本框能够动态地生成和管理关键词标签。这个功能广泛应用于各种网站,如社交媒体、博客平台、论坛等,帮助用户方便地组织和分类内容。 首先...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本篇文章将深入探讨如何使用jQuery实现表格无刷新排序,这是一个提高用户体验的有效方法,尤其是在处理大量数据时...
在Web开发中,jQuery Combobox是一款常用的UI组件,它将下拉列表和文本输入框结合在一起,提供了更友好的用户交互体验。然而,实际应用中可能会遇到一些问题,如默认选择不正确、在滚动操作后无法关闭下拉列表等。...
RatingStars插件是基于jQuery构建的,因此在使用之前需要确保页面已经引入了jQuery库。 ### RatingStars主要特性 1. **自定义星星图案**:RatingStars插件允许开发者替换默认的星星图标,可以使用SVG、PNG或任何...
// the options for this ajax request }cache(true) 数据类型: Boolean jQuery 1.2中新添加的参数, 如果设为false,则会强制浏览器不缓存请求的页面。 complete 数据类型: Function 当请求完成时...
1. **引入jQuery**:首先确保你的页面已经包含了jQuery库,这通常是通过在`<head>`标签内添加链接到jQuery的CDN来完成的。 2. **引入tablesorter**:然后,你需要引入tablesorter的JavaScript文件,通常通过`...
在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
在.NET和jQuery的世界里,无刷新多文件上传是一种提高用户体验的技术,它允许用户在不重新加载整个网页的情况下上传多个文件。这种技术的核心在于利用Ajax异步通信和前端库(如jQuery)来处理用户交互,同时借助后端...