一个jquery插件,页面上的等待提示


一个jquery插件,页面上的等待提示_第1张图片

一个jquery插件,页面上的等待提示_第2张图片


<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <script src="http://static.blog.csdn.net/scripts/jquery.js"></script>
  <script type="text/javascript">
/**
 * 使用方法:
 * 开启:MaskUtil.mask();
 * 关闭:MaskUtil.unmask();
 * 
 * MaskUtil.mask('其它提示文字...');
 */
// MaskUtil Start
var MaskUtil = (function(){
	
	var $mask,$maskMsg;
	
	var defMsg = '正在处理,请稍待。。。';
	
	function init(){
		if(!$mask){
			$mask = $("<div></div>")
			.css({
			  'position' : 'absolute'
			  ,'left' : '0'
			  ,'top' : '0'
			  ,'width' : '100%'
			  ,'height' : '100%'
			  ,'opacity' : '0.3'
			  ,'filter' : 'alpha(opacity=30)'
			  ,'display' : 'none'
			  ,'background-color': '#ccc'
			})
			.appendTo("body");
		}
		if(!$maskMsg){
			$maskMsg = $("<div></div>")
				.css({
				  'position': 'absolute'
				  ,'top': '50%'
				  ,'margin-top': '-20px'
				  ,'padding': '5px 20px 5px 20px'
				  ,'width': 'auto'
				  ,'border-width': '1px'
				  ,'border-style': 'solid'
				  ,'display': 'none'
				  ,'background-color': '#ffffff'
				  ,'font-size':'14px'
				})
				.appendTo("body");
		}
		
		$mask.css({width:"100%",height:$(document).height()});
		
		var scrollTop = $(document.body).scrollTop();
		
		$maskMsg.css({
			left:( $(document.body).outerWidth(true) - 190 ) / 2
			,top:( ($(window).height() - 45) / 2 ) + scrollTop
		}); 
				
	}
	
	return {
		mask:function(msg){
			init();
			$mask.show();
			$maskMsg.html(msg||defMsg).show();
		}
		,unmask:function(){
			$mask.hide();
			$maskMsg.hide();
		}
	}
	
}());
// MaskUtil End


function doSomething(msg){
	MaskUtil.mask(msg);
	setTimeout(function(){
		// 模拟操作时间,3秒后关闭
		MaskUtil.unmask();

	},3000);
}
  </script>
 </head>

 <body>

  <input type="button" value="操作" onclick="doSomething()">
   <input type="button" value="操作2" onclick="doSomething('正在查询中...')">
 </body>
</html>


你可能感兴趣的:(jquery插件,mask)