温馨提示×

基于jquery的blockui插件怎么用

小亿
87
2023-07-28 19:50:03
栏目: 编程语言

使用jQuery的blockUI插件可以在网页中创建和管理自定义的模态对话框、载入提示和加载动画等。以下是一个简单的使用示例:

首先,引入jQuery和blockUI插件的库文件:

<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/block-ui"></script>

然后,在需要使用blockUI的地方调用相关函数即可。例如,在点击按钮时显示一个载入提示:

<button id="btn">点击加载</button>
<script>
$(document).ready(function() {
$('#btn').click(function() {
$.blockUI({ message: '<h2>正在加载中...</h2>' });
setTimeout($.unblockUI, 2000);
});
});
</script>

在这个示例中,当按钮被点击时,调用$.blockUI()函数创建一个带有提示信息的模态对话框。之后,使用setTimeout()函数延迟2秒后调用$.unblockUI()函数关闭模态对话框。

你可以根据自己的需求使用不同的blockUI函数,例如显示加载动画、自定义模态对话框内容等。具体的使用方法请参考blockUI插件的文档。

0