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

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

版本:

浏览量:92

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

由于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');
  }
});

发表评论

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