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选择的元素遮罩
相关推荐
简单的jQuery加载等待转圈页面小插件
NULL 博文链接:https://xinjiatao.iteye.com/blog/2210769
JQuery的7个经典插件,涵盖了常用的日历、表单、统计图、弹出窗口等
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
可直接运行, Jquery消息通知插件,消息提示,消息弹窗。
jquery 插件jquery 插件jquery 插件jquery 插件
jQuery消息提示框插件点击调用是一款设置4种样式提示框,成功提示,失败提示,警告提示,信息提醒等点击按钮调用提示框代码。 jQuery消息提示框插件点击调用截图
NULL 博文链接:https://mojianpo.iteye.com/blog/772761
jQuery消息提示框插件Tipso是一款方便实用的jquery提示框代码。
34、jQuery消息提示框插件Tipso
等待数据加载jquery.BlockUI.js,有Demo 效果不错
jquery-notify是一款简单实用的jQuery消息提示插件,该消息提示插件的特点是可以在显示提示框的时候发出声音。它简单实用,用户体验非常好。
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jQuery 提示框插件。 有实例,使用极其方便。
很好用的Jquery消息提示插件,可以实现多种效果的消息提示
基于jquery的BlockUI做的遮罩层
Jquery全屏遮掩及加载条插件,使用: <script type="text/javascript" src="js/jquery-1.4.2.min.js"> <script type="text/javascript" src="js/jquery.poshytip.js"> <script type="text/javascript" src="js/...