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

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

版本:

浏览量:2162

最后更新:2021-09-11

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

推荐指数:

详细信息

由于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');
  }
});
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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

  • 评论列表