jquery 中 .blockUI 的简单示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1624699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simple example for .blockUI in jquery
提问by user182401
HI please guide me to the purpose of blockUI with an simple demonstration
嗨，请通过一个简单的演示指导我了解blockUI的目的
-Thanks
-谢谢
回答by Russ Cam
Take a look at the demos on the plugin page.
You need to do have the following in a page (in this order)
您需要在页面中包含以下内容（按此顺序）
- Add a reference to the jQuery corescript
- Add a reference to the Block UI script
- Add the jQuery code required to achieve the overlay when it is required
- 添加对jQuery 核心脚本的引用
- 添加对Block UI 脚本的引用
- 需要时添加实现覆盖所需的jQuery代码
回答by Jason Punyon
From the homepage:
从主页：
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser1. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
jQuery BlockUI 插件允许您在使用 AJAX 时模拟同步行为，而无需锁定浏览器1。激活后，它将阻止用户对页面（或页面的一部分）进行活动，直到它被停用。BlockUI 向 DOM 添加元素，使其具有阻止用户交互的外观和行为。
If you want to have ajax, but you also want to block user input while a long ajax request is happening, then BlockUI is for you.
如果您想使用 ajax，但又想在发生长 ajax 请求时阻止用户输入，那么 BlockUI 适合您。
回答by bob marti
To create a js file jquery.blockUI.jsfrom this link.and put it into your project where the js files inclu
要从此链接创建一个 js 文件jquery.blockUI.js，并将其放入包含 js 文件的项目中
and in html write this code:
并在 html 中编写此代码：
<div id="throbber" style="display:none;">
<img src="/static/image/gears.gif" /><h4>Please..</h4>
</div>
{% block customjs %}
<script type="text/javascript">
$(document).ajaxStop($.unblockUI);
$(document).ready(function() {
$.blockUI({ message:$('#throbber') });
});
</script>
This is a simple demonstration.May be it will be helps to you
这是一个简单的演示。也许它会对你有所帮助
Add a reference to the jquery.blockUI.js
添加对jquery.blockUI.js的引用
回答by khairulbahri
<script type="text/javascript">
$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});
</script>
回答by JavaSheriff
I was just got help from Adrian Brand and made it work...
So if anyone else is looking for a working sample:
我刚刚从 Adrian Brand 那里得到了帮助并让它发挥了作用......
所以如果其他人正在寻找工作样本：
function block() {
$.blockUI();
setTimeout(unBlock, 5000);
}
function unBlock() {
$.unblockUI();
}
function alertUser() {
alert('Alert User');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<button onclick="alertUser()">Alert</button>
<button onclick="block()">Block!</button>
<button onclick="unBlock()">UnBlock!</button>回答by Ravi Singh
Here is a very basic example:
这是一个非常基本的例子：
<!DOCTYPE html>
<html>
<head>
<title>Jquery BlockUi Plugin</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
<button class="btn">
Click me to block UI
</button>
</body>
<script type="text/javascript">
$('.btn').click(function(argument) {
$.blockUI({message:"Ui is blocked"});
setTimeout($.unblockUI,2000)
})
</script>
</html>
