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
, block
或 unblock
函数时传递局部对象覆盖
例如:
// 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选择的元素遮罩