当我们在前端通过ajax调用后台的时候,由于数据量各有不同,可能会造成长时间的等待,但此时等待的用户仍然可以操作界面上的其他元素,例如重新点击一个按钮,这种情况是不被允许的.或者有时候需要执行某些操作后,对用户界面进行锁屏,经过一段时间后重新恢复,此时当然会想到在页面上增加一层div来进行遮挡,但jQuery的BlockUI已经帮你完成了这样的工作,我们可以通过简单的js代码来达到各种各样的效果
jQuery BlockUI使用:
通过以下地址可以访问BlockUI的官网,由于天朝长城的原因,有时需要VPN才能正常访问,上面有众多的Demo可供参考http://www.malsup.com/jquery/block/
首先当然是要引入blockUI,由于笔者项目使用jQuery1.6,以下Demo就使用1.6
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-block-ui.js"></script>
$(function(){
//当加载完后立刻锁屏,并显示hello world为锁屏信息
//若然只想锁屏但不显示任何信息,可以设置为null
$.blockUI({
message:"hello world";
})
})
$(function(){
//可以为BlockUI增加样式
$.blockUI({ css : {
border : "none",
padding : "15px",
backgroundColor : "#000",
"-webkit-border-radius" : "10px",
"-moz-border-radius" : "10px",
opacity : .5,
color : "#fff"
}})
})
$(function(){
/*
* 可直接获取id为loginForm的表单来进行弹出,
* 实现类似popup的功能
*/
$.blockUI({
message : $("#loginForm")
})
//2秒后关闭遮挡
setTimeout($.unblockUI,2000);
})
$(function(){
$.blockUI();
setTimeout(function(){
$.unblockUI({
//执行解除锁屏的回调函数
onUnblock : function(){
alert("onUnblockUI");
}
})
},2000);
});
$(function(){
$.blockUI({
//当锁屏后点击其他地方触发的事件,这里触发为解除锁屏
onOverlayClick : $.unblockUI
});
});
$(function(){
//设置全局ajax开始时锁屏
$(document).ajaxStart(function () {
blocks();
});
//设置全局ajax结束时解锁
$(document).ajaxStop(function () {
$.unblockUI();
});
});
总结:
使用BlockUI只需要编写少量代码就能实现轻松方便的锁屏和解锁,还可以设置自定义的样式去控制BlcokUI样式的显示,作为jQueryUI的小工具,极其易学和使用方便
分享到:
相关推荐
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
最新版本的jquery blockUI 2.7.0,官方完整版,测试通过,想要自定义设置一些东西可以直接百度或者查看官网demo
jQuery BlockUI 插件(遮罩层)源代码 博文地址:http://blog.csdn.net/evangel_z/article/details/51123612
jquery.blockUI插件用法实例,欢迎下载。
附件包含jquery.blockUI.JS,将其添加进引用,即可使用。
需要引入的js文件 博文链接:https://yijinglanshan.iteye.com/blog/845329
NULL 博文链接:https://javaeedevelop.iteye.com/blog/1577237
在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息;或者用来显示一个登陆...
BlockUI - Page or element overlay
官方最新版的 jquery-blockUI,本人没有对其进行任何的修改,完全是从官网上下载了。
jQuery blockUI plugin * Version 2.08 (06/11/2008) * @requires jQuery v1.2.3 or later
vue 2的BlockUI类似于jquery blockUI,可用于加载屏幕。 目录 安装 npm install --save vue-blockui 使用组件 安装所有组件: import Vue from 'vue' import BlockUI from 'vue-blockui' Vue . use ( ...
NULL 博文链接:https://jw-long.iteye.com/blog/1287241
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的...
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
jquery blockUI 遮罩不能消失与不能提交的解决方法,使用jquery blockUI的朋友可以参考下。
等待数据加载jquery.BlockUI.js,有Demo 效果不错