資料結構
網路
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+ 次檢視
