simple example for .blockUI in jquery_问答_开发者

开发者 https://www.devze.com 2022-12-09 23:24 出处：网络

Please guide me to the purpos开发者_运维问答e of blockUI with a simple demonstration.Take a look at the demos on the plugin page.

相关专题：blockui 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>