Please guide me to the purpose of blockUI with a simple demonstration.
Add a comment
|
6 Answers
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
Comments
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
Comments
<script type="text/javascript">
$(document).ready(function() {
$('#demo10').click(function() {
$.blockUI({
message: '<h1>Auto-Unblock!</h1>',
timeout: 2000
});
});
});
</script>
Comments
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>
Comments
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.
1 Comment
user182401
Hi i would like to simple demonstation from you people since i am new to JQuery it woulld be more helpful to me. --Thanks
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>
