基于Jquery的加载状态提示插件-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_14275/article/details/81899595

本文介绍了一个基于jQuery的加载对话框插件，该插件可在页面上显示一个带有自定义文本的加载提示框，并在AJAX请求完成时隐藏。通过简单的API调用即可实现页面加载指示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


 /**
 * progressDialog for jQuery
 * Written by vakin Jiang (mailto: chiang.www@gmail.com)
 * Date: 2010/7/30
 * @author vakin
 * @version 1.0
 * 
 * @example
 * $(document).progressDialog.showDialog();
 * 
 *  $.ajax({
	  .....
	  complete:function(data){
	    $(document).progressDialog.hideDialog();
	    //do something
	  }
	});
 **/
(function($) {
	$.fn.progressDialog = function() {

	};

	$.fn.progressDialog.showDialog = function(text) {
		text = text || "Loading,Please wait..."
		createElement(text);
		setPosition();
		waterfall.appendTo("body");
		$(window).bind('resize', function() {
			setPosition();
		});
	}

	$.fn.progressDialog.hideDialog = function(text) {
		waterfall.remove();
	}

	function createElement(text) {
		if (!waterfall) {
			waterfall = $(document.createElement("div"));
			waterfall.attr("id", "waterfall");
			waterfall.css( {
				"height" : "100%",
				"width" : "100%",
				"filter" : "alpha(opacity = 50)",
				"-moz-opacity" : "0.5",
				"opacity" : "0.5",
				"background-color" : "#CCCCCC",
				"position" : "absolute",
				"left" : "0px",
				"top" : "0px"
			});
		}
		if (!loadDiv) {
			loadDiv = document.createElement("div");
		}
		$(loadDiv).appendTo(waterfall);

		var content = "<span>"+text+"</span>";
		$(loadDiv).html(content);
	}

	function setPosition() {
		var leftOffset = ($(document).width() - 120) / 2;
		var topOffset = ($(document).height() - 60) / 2;
		$(loadDiv).css( {
			"position" : "absolute",
			"height" : "60px",
			"width" : "120px",
			"left" : leftOffset + "px",
			"top" : topOffset + "px"
		});
	}

	var waterfall;
	var loadDiv;
})(jQuery);