详细信息
waitFor 是一个轻量级的 jQuery 插件,用于使用Bootstrap模式和进度条组件显示加载指示器弹出窗口。
用于在 ajax 调用运行时显示可自定义的加载/忙碌指示器。
安装:
# NPM
$ npm install bootstrap-waitingfor
# Bower
$ bower install bootstrap-waitingfor
如何使用它:
1.bootstrap-waitingfor.js
在 jQuery 和 Bootstrap 库之后加载主要的 JavaScript 文件。
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-waitingfor.js"></script>
2. 显示默认加载模式的 JavaScript。
waitingDialog.show('Loading Something...');
3、ajax调用停止时隐藏加载模式。
waitingDialog.hide();
4. 使用以下选项自定义加载模式。
waitingDialog.show('Loading Something...',{
// if the option is set to boolean false, it will hide the header and "message" will be set in a paragraph above the progress bar.
// When headerText is a not-empty string, "message" becomes a content above the progress bar and headerText string will be set as a text inside the H3;
headerText: '',
// this will generate a heading corresponding to the size number
headerSize: 3,
// extra class(es) for the header tag
headerClass: '',
// bootstrap postfix for dialog size, e.g. "sm", "m"
dialogSize: 'm',
// bootstrap postfix for progress bar type, e.g. "success", "warning";
progressType: '',
// determines the tag of the content element
contentElement: 'p',
// extra class(es) for the content tag
contentClass: 'content'
});
5. 可用的显示/隐藏回调函数。
waitingDialog.show('Loading Something...',{
// after the modal was hidden
onHide: null,
// after the modal was shown
onShow: null
});
变更日志:
v1.2.9 (2021-08-27)
截至日期为5引导
v1.2.8 (2019-10-23)
如果在显示后立即调用,则修复了 Bootstrap 4隐藏不起作用的问题
2018-02-23
添加对 Bootstrap 4 的支持。
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。