jQuery Block UI是一個非常有用的JQuery插件,可以快速構建屏幕阻止效果,為用戶提供更佳的體驗,處理異步請求和等待片刻的操作都是非常有效的。
jQuery Block UI提供了豐富的選項,可以自定義阻止效果,如使用圖像,Ajax請求和動畫等。
$.blockUI({ message: '', css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff' } });
這里是一個jQuery Block UI插件的例子,當使用Ajax從服務器請求時,可以使用此代碼:
$.ajax({ url: 'yourUrl', type: 'post/get', data: 'yourData', beforeSend: function () { $.blockUI({ message: '' }); }, success: function (data) { $.unblockUI(); //處理請求成功 }, error:function(){ $.unblockUI(); //處理請求錯誤 } });
當使用阻塞UI插件時,必須在處理請求成功或錯誤后解除UI屏幕的阻止效果。這很重要,否則您的用戶將無法使用你的網站.
如果你想要更多的參考或文檔,可以查看jQuery BlockUI插件的文檔和GitHub頁面。