数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究jQuery BlockUI 插件
如今，异步 JavaScript 变得越来越流行，因为我们不需要重新加载网页来更新网页数据。我们可以使用 AJAX 请求从数据库中获取数据并在不重新加载的情况下更新网页上的数据。
但是，更新数据总是需要一些最短的时间，可能是几毫秒或几秒。对于用户来说，看到应用程序正在更新数据可能会令人感到烦躁，并且用户可能会认为应用程序在获取数据时卡住了。因此，在这种情况下，我们可以显示一个加载 UI，不允许用户与应用程序交互。
Jquery blockUI 插件允许我们使用漂亮的加载屏幕阻塞 UI，并且可以阻止用户与应用程序交互。此外，我们可以使用该插件将网页或自定义 HTML 设置为加载 UI。
语法
用户可以按照以下语法使用 Jquery 的 block UI 插件来阻塞和解除阻塞 UI。
//Blocking the UI $.blockUI(); //Unblocking the UI $.unblockUI();
在上面的语法中，我们使用 ‘blockUI()’ 方法阻塞应用程序的 UI，并使用 ‘unblockUI()’ 解除应用程序的 UI 阻塞。
示例 1
在下面的示例中，我们通过 CDN 使用了 blockUI 插件。每当用户点击网页上的“阻塞 UI”按钮时，它将调用 blockUI() 函数。
在 blockUI() 函数中，我们使用 blockUI() 方法阻塞 UI，然后使用 setTimeOut() 方法在 2000 毫秒后使用 unblockUI() 方法解除 UI 阻塞。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using jQuery's blockUI plugin to block UI with a default message</h3>
<p>Click on the below button to block UI</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI();
setTimeout(function () {
//Unblock UI
$.unblockUI();
}, 2000);
}
</script>
</body>
</html>
示例 2
下面的示例演示了使用 blockUI 插件自定义阻塞消息。在这里，我们传递了一个包含 blockUI() 方法参数的对象。该对象包含一个键为 message，值为 HTML 的对象，我们希望在阻塞屏幕上显示该对象。
在输出中，用户可以在阻塞屏幕上看到自定义消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with a custom message.</h3>
<p>Click on the below button to block UI.</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI({ message: '<h1><img src="https://cdn-icons-png.flaticon.com/512/6356/6356659.png" height="50px" width="50px"/> Wait for 4 seconds total ... </h1>' });
setTimeout(function () {
// unblock UI
$.unblockUI();
}, 4000);
}
</script>
</body>
</html>
示例 3
在下面的示例中，我们演示了如何向自定义阻塞消息添加 CSS 并对其进行样式设置。我们需要使用 HTML 和 CSS 来表示任何网页，而 block UI 插件允许我们做到这一点。
我们可以将对象作为 blockUI() 方法的参数传递，该对象可以包含 message 和 CSS 作为键，并分别包含相应的值。我们可以将网页的 HTML 内容作为 message 的值传递，将 CSS 作为 'css' 键的值传递。
通过这种方式，我们可以显示一个有吸引力的网页作为阻塞 UI。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with a custom message.</h3>
<p>Click on the below button to block UI.</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI({ message: '<h1><img src="https://cdn-icons-png.flaticon.com/512/6356/6356659.png" height="50px" width="50px"/> Wait for 4 seconds total ... </h1>' });
setTimeout(function () {
// unblock UI
$.unblockUI();
}, 4000);
}
</script>
</body>
</html>
示例 4
在下面的示例中，我们创建了输入字段以获取用户的自定义消息和阻塞持续时间。在 JavaScript 中，我们访问输入的值，并根据该值显示阻塞消息并阻塞网页，直到特定的持续时间。
在输出中，用户可以输入自定义阻塞消息和时间持续时间，然后单击按钮以查看他们选择的阻塞消息。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with custom messages and custom CSS</h3>
<p>Enter the custom blocking message and block duration.</p>
<input type = "text" id = "message" placeholder = "Enter the message to be displayed" /><br> <br>
<input type = "number" id = "duration" placeholder = "Enter the duration in milli seconds" /> <br> <br>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
var message = document.getElementById("message").value;
var duration = document.getElementById("duration").value;
$.blockUI({ message: message });
setTimeout(function () {
$.unblockUI();
}, duration);
}
</script>
</body>
</html>
用户学习了如何使用 block UI 插件来阻塞 Web 应用程序的 UI。它对于在更新网页数据时显示阻塞 UI 很有用。此外，它允许我们自定义阻塞消息和持续时间。
2K+ 次查看
