jQuery遮罩插件 jquery.blockUI.js
Overview
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。
使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js
jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/
用法很简单,组织用户对页面的交互:
$.blockUI();
使用自定义信息阻塞UI
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
使用自定义样式阻塞UI
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
解除对页面的遮罩
$.unblockUI();
如果你先要使用缺省设置对所有的ajax请求都使用UI遮罩,只需要添加下面语句即可
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
使用例子:
页面遮罩示例:
This page demonstrates several ways to block the page. Each button below activates blockUI and then makes a remote call to the server.
The following code is used on this page:
<scripttype="text/javascript">
// unblock when ajax activity stops $(document).ajaxStop($.unblockUI);
function test() { $.ajax({ url: 'wait.php', cache: false }); }
$(document).ready(function() { $('#pageDemo1').click(function() { $.blockUI(); test(); }); $('#pageDemo2').click(function() { $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); test(); }); $('#pageDemo3').click(function() { $.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } }); test(); });
$('#pageDemo4').click(function() { $.blockUI({ message: $('#domMessage') }); test(); }); });
</script>
...
<divid="domMessage"style="display:none;"> <h1>We are processing your request. Please be patient.</h1> </div>
页面元素遮罩示例:
This page demonstrates how to block selected elements on the page rather than the entire page. The buttons below will block/unblock access to the bordered area beneath them.
Option 1Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit ametOption 1Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo Test link - click me! lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet
The following code is used on this page:
<scripttype="text/javascript"> $(document).ready(function() {
$('#blockButton').click(function() { $('div.test').block({ message: null }); });
$('#blockButton2').click(function() { $('div.test').block({ message: '<h1>Processing</h1>', css: { border: '3px solid #a00' } }); });
$('#unblockButton').click(function() { $('div.test').unblock(); });
$('a.test').click(function() { alert('link clicked'); return false; }); }); </script>
简单模态框示例:
This page demonstrates how to display a simple modal dialog. The button below will invoke blockUI
with a custom message. Depending upon the user response (yes or no) an ajax call will be made while keeping the UI blocked.
The following code is used on this page:
<scripttype="text/javascript"> $(document).ready(function() {
$('#test').click(function() { $.blockUI({ message: $('#question'), css: { width: '275px' } }); });
$('#yes').click(function() { // update the block message $.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({ url: 'wait.php', cache: false, complete: function() { // unblock when remote call returns $.unblockUI(); } }); });
$('#no').click(function() { $.unblockUI(); return false; });
}); </script>
...
<inputid="test"type="submit"value="Show Dialog" />
...
<divid="question"style="display:none; cursor: default"> <h1>Would you like to contine?.</h1> <inputtype="button"id="yes"value="Yes" /> <inputtype="button"id="no"value="No" /> </div>
For full-featured modal dialog support, check out Simple Modal by Eric Martin or jqModal by Brice Burgess.选项
BlockUI's default options look (exactly) like this:
// 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' },
// 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 s-l-o-w // (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 };
Changing the blockUI options is simple and can be done in one of two ways:
- Globally, by directly overriding the values in the
$.blockUI.defaults
object - Locally, by passing an options object to the
blockUI
(orblock
) function.
Global Overrides
You can change the default options by simply declaring different values for them. For example:
// change message border $.blockUI.defaults.css.border = '5px solid red';
// make fadeOut effect shorter $.blockUI.defaults.fadeOut = 200;
Local Overrides
Local overrides are achieved by passing an object to the blockUI
, unblockUI
, block
or unblock
functions. The exact same options are available to the local options object as are available in the global object. For example:
// 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...' });
插件官网:http://jquery.malsup.com/block其他参考博文:http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
jQuery遮罩插件 jquery.blockUI.js相关推荐
- jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
- Jquery遮罩插件,想罩哪就罩哪!
原文:Jquery遮罩插件,想罩哪就罩哪! 一 前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
- jquery 滚轮插件 jquery.mousewheel.js
jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js. Github地址:jquery-mouse ...
- 一款很好用的Jquery 打印插件——jQuery.print.js
https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.co ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...
直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
最新文章
- CSDN湘苗培优|成长,从走出舒适区开始
- 如何解决MySQL连接超时关闭
- 英伟达奔驰共同发布自动驾驶系统,还自带停车功能
- JAVA运行时异常及检查式异常
- 欧几里德算法求最大公约数
- [转]asp.net导出数据到Excel的三种方法
- strcpy用于调用的参数太少_JVM:虚拟机方法调用(理解重载和重写的本质)
- 东北大学计算机生源,辽宁省2021年普通高校招生计划,东北大学、大连理工大学没有扩招...
- vue+echart 利用散点图实现柱状时间驻留图
- 推荐几本数据库基础书
- react实现动画电子倒计时组件
- 虚拟机Ubuntut tftp服务不启动,service tftpd-hpa restart 失败的处理
- 电路串联和并联图解_如何识别串联电路和并联电路
- 腾讯往届笔试面试题整理大全
- TeamTalk的windows客户端流程
- 校友名录复旦计算机科学陆琪,寄语 | 致2017届小鲜肉:年年情相似,岁岁人不同...
- 修改用友服务器ip地址,修改用友服务器ip地址
- android WebView加载视频只有声音没有画面
- 新富人群的快速壮大,急需金融在线直播提供更高效和广泛的服务
- PPT基础(二十二)裁剪图片
热门文章
- 387.字符串中的第一个唯一字符
- JavaWeb请求的重定向与转发:getRequestDispatcher()的forward方法,sendRedirect方法,以及重定向与转发的区别
- 【知识图谱系列】知识图谱的神经符号逻辑推理
- 论文引介 | Information Extraction with Reinforcement Learning
- 计算化侦查之根据公交卡记录抓小偷
- 数据库基础(4)函数依赖公理和推论(Armstrong公理),属性闭包和求候选键的技巧
- Q-learning和Sarsa
- 只需一个技巧,用手机轻松拍出震撼广角风景照
- TCP和HTTP的区别和联系
- 计算几何——poj1410,线段不规范交