JQuery中遮罩层progressDialog 简单使用

最新推荐文章于 2025-10-18 17:50:37 发布

原创最新推荐文章于 2025-10-18 17:50:37 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细介绍了如何在jQuery中利用progressDialog插件创建遮罩层，以提高用户体验，特别是在处理长时间数据加载时。通过简单的JavaScript代码，可以轻松实现等待提示效果，包括带图片的遮罩层。此外，提供了所需JS文件的下载链接。

[url]http://yuelangyc.iteye.com/blog/1464122[/url]
在应用中经常会用到遮罩层，比较常见的，比如系统在读取数据时，等待时间很长的话，防止用户在等待响应的时候，点击别的请求，通常会做一下限制，这里就用到了遮罩层。这次我主要想说的是 jQuery中的 progressDialog。

progressDialog是JQuery中定义好可以直接使用的遮罩层，在事件中根据条件调用
Javascript代码

//简单遮罩层  
if(typeof $(document).progressDialog != 'undefined')  
    $(document).progressDialog.showDialog("请耐心等待...");   
//带图片的遮罩层  
if(typeof $(document).progressDialog != 'undefined')  
    $(document).progressDialog.showDialog("请耐心等待",$("#basePath").val()+'image/loading.gif');  
//层关闭  
if(typeof $(document).progressDialog != 'undefined')  
    $(document).progressDialog.hideDialog();

目前我主要用到的就是这三个方法，在用之前需要引入两个JS，
1. jquery-1.4.2.min.js
2. jquery.processing.plugin.js

附件为processing.plugin.js 和一个loading图片
不会自己做就可以用这个。
素材： [url]http://dl.iteye.com/topics/download/08eb5f07-9cd3-3c17-8e65-292df0357c43[/url]