jQuery UI Block插件是一个常用的界面元素阻塞插件,它可以在页面上创建一个半透明的覆盖层,阻止用户与底层元素交互,通常用于在长时间操作(如AJAX请求)期间显示加载状态。
要实现延迟显示UI Block,主要有以下几种方法:
// 延迟500毫秒后显示block
var blockTimer = setTimeout(function() {
$.blockUI({
message: '正在加载...',
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
}, 500);
// 在操作完成后取消block和定时器
function completeOperation() {
clearTimeout(blockTimer);
$.unblockUI();
}
// 使用delay()方法延迟显示
$('body').delay(500).queue(function() {
$.blockUI({ message: '请稍候...' });
$(this).dequeue();
});
// 取消时
$.unblockUI();
$.ajax({
url: 'your-endpoint',
beforeSend: function() {
// 延迟500ms显示加载提示
this.blockTimer = setTimeout(function() {
$.blockUI({ message: '加载数据中...' });
}, 500);
},
complete: function() {
clearTimeout(this.blockTimer);
$.unblockUI();
},
success: function(data) {
// 处理数据
}
});
问题:blockUI在操作完成后才显示
问题:blockUI不消失
没有搜到相关的文章