当前位置: 代码迷 >> Web前端 >> jquery揭示等待消息经典插件blockUI
  详细解决方案

jquery揭示等待消息经典插件blockUI

热度:1210   发布时间:2013-02-26 00:00:00.0
jquery提示等待消息经典插件blockUI

jquery非常经典的等待提示插件,具体官网

http://jquery.malsup.com/block/

参数:

// override these in your code to change the default behavior and style $.blockUI.defaults = {     	// message displayed when blocking (use null for no message)     	message:  '<h1>Please wait...</h1>',      	title: null,        // title string; only used when theme == true     	draggable: true,    // only used when theme == true (requires jquery-ui.js to be loaded)      theme: false, // set to true to use with jQuery UI themes      	// styles for the message when blocking; if you wish to disable     	// these and use an external stylesheet then do this in your code:     	// $.blockUI.defaults.css = {};     	css: {		padding:0,		margin:0,		width:'30%',         		top:'40%',         		left:'35%',         		textAlign:'center',         		color:'#000',         		border:'3px solid #aaa',         		backgroundColor:'#fff',		cursor:'wait',		opacity:0.6	},      	// minimal style set used when themes are used     	themedCSS: {         		width:'30%',         		top:'40%',         		left:'35%'     	},      	// styles for the overlay设置覆盖层样式  	overlayCSS:  {         		backgroundColor:'#000',         		opacity:0.6,		cursor:'wait'     	},      	// style to replace wait cursor before unblocking to correct issue     	// of lingering wait cursor     	cursorReset: 'default',      	// styles applied when using $.growlUI     	growlCSS: {         		width:'350px',         		top:'10px',         		left:'',         		right:'10px',         		border:'none',		padding:'5px',         		opacity:0.6,         		cursor:null,         		color:'#fff',         		backgroundColor:'#000',         		'-webkit-border-radius':'10px',         		'-moz-border-radius':'10px'     	},          	// IE issues: 'about:blank' fails on HTTPS and javascript:false is slow     	// (hat tip to Jorge H. N. de Vasconcelos)     	iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',      	// force usage of iframe in non-IE browsers (handy for blocking applets)     	forceIframe: false,      	// z-index for the blocking overlay     	baseZ: 1000,      	// set these to true to have the message automatically centered     	centerX: true, // <-- only effects element blocking (page block controlled via css above)     	centerY: true,      	// allow body element to be stetched in ie6; this makes blocking look better     	// on "short" pages.  disable if you wish to prevent changes to the body height     	allowBodyStretch: true,      	// enable if you want key and mouse events to be disabled for content that is blocked     	bindEvents: true,      	// be default blockUI will supress tab navigation from leaving blocking content     	// (if bindEvents is true)     	constrainTabKey: true,      	// fadeIn time in millis; set to 0 to disable fadeIn on block     	fadeIn:  200,     	// fadeOut time in millis; set to 0 to disable fadeOut on unblock     	fadeOut:  400,      	// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock 设置什么时间后遮罩消失单位毫秒  	timeout: 0,      	// disable if you don't want to show the overlay是否显示背景遮罩	showOverlay: true,      	// if true, focus will be placed in the first available input field when     	// page blocking     	focusInput: true,      	// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)     	// no longer needed in 2012     	// applyPlatformOpacityRules: true,     			// callback method invoked when fadeIn has completed and blocking message is visible遮罩完成后调用方法   	onBlock: null,      	// callback method invoked when unblocking has completed; the callback is   取消遮罩后调用方法	// passed the element that has been unblocked (which is the window object for page     	// blocks) and the options that were passed to the unblock call:     	//   onUnblock(element, options)     	onUnblock: null,      	// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493     	quirksmodeOffsetHack: 4,      	// class name of the message block     blockMsgClass: 'blockMsg',      	// if it is already blocked, then ignore it (don't unblock and reblock)     	ignoreIfBlocked: false }; 

?修改默认属性也非常简单可以使用下面两种方法:

1.全局的直接覆盖$.blockUI.defaults对象的属性

例如:

// change message border $.blockUI.defaults.css.border = '5px solid red';  // make fadeOut effect shorter $.blockUI.defaults.fadeOut = 200;

2.使用 blockUI, unblockUI, blockunblock函数时传递局部对象覆盖

例如:

// change message border $.blockUI({ css: { border = '5px solid red'} }); // make fadeOut effect shorter $.unblockUI({ fadeOut: 200 });  // use a different message $.blockUI({ message: 'Hold on!' });  // use a different message $('#myDiv').block({ message: 'Processing...' }); 

?

说明:$.blockUI、$.unblockUI是针对真个页面遮罩而block、unblock是针对jquery选择的元素遮罩

?

?

?

?

?

?

  相关解决方案