基于Jquery的加载状态提示插件

 /**
 * progressDialog for jQuery
 * Written by vakin Jiang (mailto: [email protected])
 * 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);


http://plugins.jquery.com/node/16950/release

你可能感兴趣的:(html,jquery,Ajax,css,Gmail)