使用jQuery在Bootstrap 4中显示加载动画，并带有"data-loading-text"属性。

Question

使用jQuery在Bootstrap 4中显示加载动画，并带有"data-loading-text"属性。

23

我试图实现一个加载效果，类似于codepen中所演示的按钮。

我正在使用Bootstrap 4 (beta 2) 和Jquery 3.2.1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group View</title>
    <link rel="stylesheet" media="all" href="../css/bootstrap.css" >
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap-bundle.js"></script>
</head>
<body>

  <div>
    <button type="button" class="btn btn-primary btn-lg">Submit Order</button>
  </div>

  <script>
    $(document).ready(function() {
      $('button').data('loading-text', 'loading...');
      $('.btn').on('click', function() {
        var $this = $(this);
        $this.button('loading');
        setTimeout(function() {
          $this.button('reset');
        }, 8000);
      });
    })
  </script>
</body>
</html>

当单击按钮时，上面的代码没有显示“加载中...”。

- Adarsh Madrecha

必须是jQuery或BS的路径。请检查您的浏览器控制台。 - Adam Azad

@AdamAzad 我的脚本 src 是错误的吗？ - Adarsh Madrecha

浏览器控制台会告诉你，你所发布的代码没问题，所以检查控制台是否有加载错误。 - Adam Azad

@AdamAzad，控制台没有错误。CSS和JS加载正常。 - Adarsh Madrecha

4个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

12

自v3.3.5版本起，此功能已被弃用并在v4中删除。来源

- user3456070

3

这也在“迁移到v4”文章中提到了。 https://getbootstrap.com/docs/4.1/migration/#buttons - Bassem

10

几天前我遇到了同样的问题，似乎没有人有解决方案。这是我的jQuery插件，它似乎为Bootstrap 4提供了相同的行为。

(function($) {
    $.fn.__bs4_btn = $.fn.button;
    $.fn.button = function(action) {
        if (action === 'loading' && this.data('loading-text')) {
            this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
        }
        if (action === 'reset' && this.data('original-text')) {
            this.html(this.data('original-text')).prop('disabled', false);
        }
        return this.__bs4_btn(action);
    };
}(jQuery));

更多细节：使用jQuery在Bootstrap 4中继续使用带有"data-loading-text"的按钮的方法（我的博客）：http://www.robertmullaney.com/2018/10/25/continue-using-data-loading-text-buttons-bootstrap-4-jquery/

- Mavelo

这在Safari和Chrome中似乎有问题。在IE11和Firefox中可以工作，但在Chrome上它无法提交表单。 - Laurence

没有代码示例很难诊断您的问题。这是使用Chrome开发的，所以... - Mavelo

1

这将破坏内置函数 $().button('toggle') 和 $().button('dispose')。最好使用不同的插件名称，如 $.fn.buttonState。 - Bassem

我不使用那些方法，因此它们没有经过测试（我不认为“加载”按钮需要它们）。如果是这种情况，那就很好。 - Mavelo

1

这可能是一个不错的解决方案，我也很想尝试。然而，我同意Bassem的观点，这会覆盖此处记录的其他按钮方法：https://getbootstrap.com/docs/4.2/components/buttons/#methods。它与“加载”按钮无关，但如果有人使用您的代码，则会破坏`toggle`方法，如果他们在其他地方使用该方法。如果您可以检查`action`参数并且在其不是“loading”或“reset”的情况下调用内置的`button`函数，那么我认为您的答案会更好。 - Cave Johnson

@Bassem 我知道现在有点晚了，但我已经提出了一个解决方案。保留所有的Bootstrap预定义功能，同时使用op提供的加载功能进行扩展。基本上，你需要复制该函数，然后在两个if语句之后调用你复制的函数。 - Mujnoi Gyula Tamas

2

我也遇到了同样的问题，并尝试使用Mavelo上传的示例，但它不能在如下查询中起作用： $('button').button('reset') 这个查询操作多个对象。这里是一个修改后的代码，支持单个和多个按钮查询： <最初的回答>

(function($) {
    $.fn.button = function(action) {
        if (this.length > 0) {
            this.each(function(){
                if (action === 'loading' && $(this).data('loading-text')) {
                    $(this).data('original-text', $(this).html()).html($(this).data('loading-text')).prop('disabled', true);
                } else if (action === 'reset' && $(this).data('original-text')) {
                    $(this).html($(this).data('original-text')).prop('disabled', false);
                }
            });
        }
    };
}(jQuery));

- Danny D Mamaev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Sébastien · Accepted Answer

我不确定Bootstrap v4中的.button()方法是否具有您尝试使用的选项。您链接的Codepen使用的是Bootstrap v3。

以下是如何使用Bootstrap 4复制相同行为的方法。

$(document).ready(function() {
  $('.btn').on('click', function() {
    var $this = $(this);
    var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
    if ($(this).html() !== loadingText) {
      $this.data('original-text', $(this).html());
      $this.html(loadingText);
    }
    setTimeout(function() {
      $this.html($this.data('original-text'));
    }, 2000);
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div>
  <button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>