页面加载缓冲的login (2)

在项目中，在我们点击加载一个页面或者查询的时候，往往需要等一段时间才能获取结果，但是在它操作的时候，我们不知道操作完成没，通常添加加载缓冲login。如下：

具体操作：（代码粘贴即可用，其中dialog.css与dialog.js是工具类，可以根据自己的需要修改样式）

dialog.css

.my-confirm-box{background-color: #E2E2E2; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	-moz-border-radius: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	-webkit-border-radius: 10px; position: absolute; z-index: 5000;}
.my-confirm-box .my-confirm-title{width: 100%; text-align: center; font-size: 1.2rem;  
	font-size: 1.2em\9; margin: 1.5rem 0 1rem; margin: 1.5em 0 1em\9;}
.my-confirm-box .my-confirm-content{text-align: left; font-size: 1rem; font-size: 1em\9; 
	margin: 0 1rem 4.5rem; margin: 0 1em 4.5em\9;}
.my-confirm-box .my-confirm-button-wrap{}
.my-confirm-box button {background: transparent; border: none; height: 3rem; height: 3em\9;
    font-size: 1rem; font-size: 1em\9; width: 50%; position: absolute; bottom: 0; 
    display: block; text-align: center; border-top: 1px solid #B4B4B4; cursor: pointer; color: #1678E5;}
.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-right{right:0; border-radius: 0 0 10px 0;}
.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-left{left:0; 
	border-right: 1px solid #B4B4B4; border-radius: 0 0 0 10px;}
.my-confirm-box .my-confirm-button-wrap button:focus, 
.my-confirm-box .my-confirm-button-wrap button:hover {font-weight: bold; background: #EFEFEF;}
.my-confirm-box .my-confirm-button-wrap button:active {background: #D6D6D6;}
.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-full-width{width: 100%; 
	border-radius: 0 0 10px 10px;}


.my-loading-box{background-color: #E2E2E2; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	-moz-border-radius: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); color: #000; 
	-webkit-border-radius: 10px; position: absolute; z-index: 5000; text-align: center; 
	min-width: 10em; padding: 15px;}
.my-loading-box .my-loading-img{background-image: url('loading.gif'); height: 120px; width: 120px;
	margin: 0 auto;}
.my-loading-box .my-loading-title{font-size: 1rem; font-size: 1rem\9; padding-top: 5px;}

dialog.js

(function ($) {
	var my_dialog_plug_name = "mydialog", my_loading_plug_name = "myloading";
	var my_loading_box;
	function MyJqDialog(element, options){
		this.init(element, options);
	}
	
	MyJqDialog.prototype.init = function (element, options) {
		var defaults = {autoShow: false, "zIndex": 4000};
		this.element = element;
		this.settings = $.extend( {}, defaults, options );
		
		var overlay_css = {"width": "100%", "height": "100%", "filter": "alpha(opacity=40)",
			"-moz-opacity": "0.4", "-khtml-opacity": "0.4", "opacity": "0.4", "background": "#FFFFFF",
			"position": "absolute", "top": "0", "left": "0", "z-index": "3000", "display": "none"};
		this.overlay = $("<div/>").css(overlay_css).appendTo($("body"));
		this.element.css({"z-index": this.settings.zIndex, position: "absolute"});
		var _this = this;
		$(window).resize(function () {
			//only do it if the dialog box is not hidden
			if (!$('#dialog-box').is(':hidden')) _this.resizeBox();
		});
		$(window).scroll(function () {
	 		_this.resizeBox();
		});
		if(this.settings.autoShow){
			this.show();
		}
	};
	
	MyJqDialog.prototype.show = function () {
		//transition effect		
		this.overlay.fadeIn(200);	
		this.overlay.fadeTo("slow", 0.8);
		//transition effect
		this.element.fadeIn(500); 
		this.resizeBox();
	};
	
	MyJqDialog.prototype.hide = function () {
		this.element.hide();
		this.overlay.hide();
	};

	MyJqDialog.prototype.resizeBox = function () {
		var box = this.element;

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(document).width();
        
        //Set height and width to mask to fill up the whole screen
        $(this.overlay).css({'width':maskWidth,'height':maskHeight});
        
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        var scrollT = $(window).scrollTop();
        var scrollL = $(window).scrollLeft();
        
        //Set the popup window to center
        box.css('top',  winH/2 - box.outerHeight()/2 + scrollT);
        box.css('left', winW/2 - box.width()/2 + scrollL);
	};
	
	$.fn[my_dialog_plug_name] = function( options ) {
		var elt;
        if ( options instanceof Object || !this.data( "plugin_" + my_dialog_plug_name ) ) {
            elt = new MyJqDialog( this, options );
            this.data('plugin_' + my_dialog_plug_name, elt);
        } else {
            elt = this.data( "plugin_" + my_dialog_plug_name );
        }
        if (typeof(options) == "string" && options.length>0){
        	eval("elt."+options+"(this)");
        }
        return this;
	};
	
	function MyJqMyLoad(options){
		this.init(options);
	}
	MyJqMyLoad.prototype = {
		init: function (options){
			var _this = this;
			
			this.element = options.loading_box;
			var width = $(document).width();
			var height = $(document).height();
			width = width * 0.5;
			height = height * 0.20;
			var defaults = {width: width+"px",height: height+"px", title: "正在处理，请稍后..."};
			if(typeof options === 'undefined') options = {};
			this.settings = $.extend( {}, defaults, options );
			
			this.confirm_box_css = {width: this.settings.width,height: this.settings.height};
			this.element.css(this.confirm_box_css);
			
			this.element.find(".my-loading-title").html(this.settings.title);
			this.element[my_dialog_plug_name]("show");
		}
	};
	$[my_loading_plug_name] = function(options){
		if(my_loading_box == null){
			my_loading_box = $("<div class='my-loading-box'><div class='my-loading-img'></div><div class='my-loading-title'></div></div>");
			$("body").append(my_loading_box);
		}
		if (typeof(options) == "string" && options=="getDialog"){
        		return my_loading_box;
        	}
		if (typeof(options) == "string" && options=="hide"){
        		my_loading_box.mydialog("hide");
			return;
		}
		if(typeof options === 'undefined'){
			options = {};
		}
		options.loading_box = my_loading_box;
		new MyJqMyLoad(options);
	}
}( jQuery ));

具体调用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
  <script src="jquery-1.8.3.js"></script>
<script src="dialog.js"></script>
<link href="dialog.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(function (){
	$("#show").click(function (){
		//自定义缓冲标题
		$.myloading({title: "正在玩命加载....."});
		setTimeout(function (){
			//关闭缓冲效果
			$.myloading("hide");
		}, 1000*3);
	});
});
</script>
</head>
<body>
  <button id="show">显示</button>
</body>
 </body>
</html>