jQuery 進度提示框是現代 Web 應用程序中必不可少的一種交互式元素。該提示框可幫助用戶了解網頁中某個操作的進度。接下來,我們將描述如何使用 jQuery 創建進度提示框。
$(document).ready(function() { $('#btnSubmit').click(function() { // 顯示進度提示框 $('#progressBox').show(); // 執行異步操作 $.ajax({ url: 'submitData.php', type: 'post', data: $('#form').serialize(), success: function() { // 隱藏進度提示框 $('#progressBox').hide(); // 顯示成功提示框 $('#successBox').show(); }, error: function() { // 隱藏進度提示框 $('#progressBox').hide(); // 顯示失敗提示框 $('#errorBox').show(); } }); }); });
在上面的代碼中,當用戶點擊提交按鈕時,我們使用 jQuery 顯示了 ID 為 progressBox 的元素,該元素是進度提示框的容器。然后,我們執行一個異步操作(使用 $.ajax 函數)。如果操作成功,則隱藏進度提示框并顯示成功提示框;否則,隱藏進度提示框并顯示失敗提示框。
有了這個進度提示框,你可以讓用戶更好地了解頁面的加載進度、文件上傳進度或其他耗時操作的進度。