用于带进度条的 Bootstrap 加载模式的 jQuery 插件 - waitingFor

用于带进度条的 Bootstrap 加载模式的 jQuery 插件 - waitingFor

版本:

浏览量:72

最后更新:2021-09-10

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

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 的支持。

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。