simple example for .blockUI in jquery
Please guide me to the purpos开发者_运维问答e of blockUI with a simple demonstration.
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 core script
- Add a reference to the Block UI script
- Add the jQuery code required to achieve the overlay when it is required
To create a js file jquery.blockUI.js from this link.and put it into your project where the js files inclu
and in html write this code:
<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
<script type="text/javascript">
$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});
</script>
I just got help from Adrian Brand and made it work...
So if anyone else is looking for a working sample:
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>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.
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.
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>
加载中,请稍侯......
精彩评论