jquery 中 .blockUI 的简单示例答案

【问题标题】：simple example for .blockUI in jqueryjquery 中 .blockUI 的简单示例
【发布时间】：2010-12-10 03:06:13
【问题描述】：

请通过简单的演示引导我了解blockUI的目的。

【问题讨论】：

标签： jquery blockui

【解决方案1】：

看看demos on the plugin page。

您需要在页面中包含以下内容（按此顺序）

添加对jQuery core 脚本的引用
添加对Block UI script的引用
需要的时候添加实现覆盖需要的jQuery代码

【讨论】：

【解决方案2】：

从此链接创建一个js文件jquery.blockUI.js。并将其放入包含js文件的项目中

在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>

这是一个简单的演示。可能对你有帮助

添加对jquery.blockUI.js的引用

【讨论】：

【解决方案3】：

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo10').click(function() { 
        $.blockUI({ 
            message: '<h1>Auto-Unblock!</h1>', 
            timeout: 2000 
        }); 
    }); 
}); 
</script>

【讨论】：

【解决方案4】：

我刚从阿德里安·布兰德那里得到帮助并成功了...
因此，如果其他人正在寻找工作样本：

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>

【讨论】：

【解决方案5】：

来自homepage：

jQuery BlockUI 插件可让您模拟同步行为时使用 AJAX，无需锁定浏览器1。激活后会防止用户在页面上活动（或页面的一部分），直到它是停用。 BlockUI 将元素添加到 DOM 给它阻塞的外观和行为用户交互。

如果您想拥有 ajax，但又想在发生长 ajax 请求时阻止用户输入，那么 BlockUI 适合您。

【讨论】：

嗨，我想向你们简单的演示一下，因为我是 JQuery 的新手，这对我会更有帮助。 --谢谢

【解决方案6】：

这是一个非常基本的例子：

<!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>

【讨论】：