BlockUI对话框 BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
这个插件的用法很简单。
1 阻止用户与页面交互:
$.blockUI();2 自定义提示信息:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });3 自定义显示样式:
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });4 解除对页面的锁定:
$.unblockUI();5 如果要使用默认设置来同步所有的AJAX请求动作,代码如下:
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);----------------------------------------------------------------------------------
BlockUI的默认选项设置如下:
// 可以使用以下代码来自定义行为和样式
$.blockUI.defaults = {
//锁定时显示的提示信息(无提示信息时设置为null)
message: '<h1>Please wait...</h1>',
// 可以用CSS来格式化锁定时显示的信息
// 如果你希望使用一个外部样式表,请使用一下代码
// $.blockUI.defaults.css = {};
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff'
},
// 设置遮罩层的样式
overlayCSS: {
backgroundColor:'#000',
opacity: '0.6'
},
// 允许在ie6中缩放body元素。这会使较短的页面看上去好一些
// 如果你不想body元素的高度被改变,请设置为disable
allowBodyStretch: true,
// 默认情况下blockUI会禁止tab导航
constrainTabKey: true,
// fadeOut时间单位为毫秒。设为0的话,在解除锁定时不使用fadeout效果。
fadeOut: 400,
// 禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题)
applyPlatformOpacityRules: 1
};
改变blockUI的设置非常简单,有2种方式:
•1、全局设置, 通过直接指定$.blockUI.defaults对象的值来设置。
•2、局部设置, 将options对象放到 blockUI (或 block) 函数内部。
全局设置
你可以通过直接的赋值来改变默认的选项。例如:
// 改变提示信息的边框
$.blockUI.defaults.css.border = '5px solid red';
// 缩短fadeOut效果的时间
$.blockUI.defaults.fadeOut = 200;
局部设置
局部设置是将options对象放到 blockUI (或 block) 函数内部。这会强制使用局部设置来代替全局设置的值。例如:
// 改变提示信息的边框
$.blockUI({ css: { border = '5px solid red'} });
...
// 缩短fadeOut效果的时间
$.blockUI({ fadeOut: 200 });
...
// 使用一个不同的提示信息
$.blockUI({ message: 'Hold on!' });
分享到:
相关推荐
BlockUI完全使用手册
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
blockUI弹出层
最新jquery.blockUI.js
包含jquery-1.2.3.js和jquery.blockUI.js 博文链接:https://wl-ldy.iteye.com/blog/1038803
在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息;或者用来显示一个登陆...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
最新的jquery.blockUI
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的...
关于jquery.blockUI的js包,希望可以帮助大家
处理层 按钮点击显示 页面刷新消失 这样可以防止重复提交 使用方法:引入js后 $ blockUI { message: "请稍后" } ;
jquery.blockUI插件用法实例,欢迎下载。
BlockUI - Page or element overlay
等待数据加载jquery.BlockUI.js,有Demo 效果不错
附件包含jquery.blockUI.JS,将其添加进引用,即可使用。
基于jquery的BlockUI做的遮罩层
blockUI.js jquery,网上看到的下载,真贵,很气愤,所以自己上传一份,方便大家下载
需要引入的js文件 博文链接:https://yijinglanshan.iteye.com/blog/845329