web-dev-qa-db-ja.com

ロードを表示.. data-loading-textでbootstrap 4でjqueryを使用

codepen で示されているように、ボタンのロード効果を達成しようとしています。

bootstrap 4（ベータ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>

上記のコードは、ボタンがクリックされたときに「読み込み中...」を表示しません。

javascriptjqueryhtmlbuttonbootstrap-4
18
Adarsh Madrecha

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>
37
Sébastien

この機能はv3.3.5から廃止され、v4で削除されました。 ソース

10
user3456070

数日前にこの同じ問題に出くわし、誰も解決策がないようです。したがって、Boostrap 4と同じ動作を提供するjQueryプラグインを次に示します。

(function($) {
    $.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);
        }
    };
}(jQuery));

詳細： jQueryでBootstrap 4の「data-loading-text」でボタンを使用し続ける方法 （私のブログ）

4
Mavelo

私は同じ問題に遭遇し、上記の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));
0
Danny D Mamaev