在 Bootstrap 4 按钮中显示加载状态 - Button-Loader

版本:

浏览量:2943

最后更新：2021-09-11

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

由于自Bootstrap v3.3.5起不推荐使用Stateful功能并已在 v4 中删除，因此您可能需要第三个插件来实现它。

Button-Loader 是一个小型 jQuery 插件，用于创建有状态按钮，该按钮在Bootstrap 4按钮内显示内联加载器，以显示 AJAX 请求等进程的状态。

如何使用它：

1. 为加载微调器加载标志性字体（本例中为 Font Awesome）。

<link rel="stylesheet" href="/path/to/fontawesome/version/css/all.css" />

2.button-inline-loader.js在 jQuery 之后加载主要的 JavaScript 。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="button-inline-loader.js"></script>

3. 添加data-loading-text到按钮并指定状态功能激活时加载的内容。

<button class="btn btn-primary button-loader"
        data-loading-text="<i class='fa fa-spinner fa-spin'></i> Loading..."
        type="submit">
        Button Loader
</button

4. 启动内联加载程序并在处理过程中禁用该按钮。

$('.button-loader').button('loading');

5. 重置按钮。

$('.button-loader').button('reset');

6. 将插件集成到 AJAX 请求中。

$.ajax({
  beforeSend: function() {
    $('.button-loader').button('loading');
  },
  complete: function() {
    $('.button-loader').button('reset');
  }
});

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码