Bootstrap 4 在按钮中加载微调器

Question

我正在尝试像Bootstrap Spinners一样在按钮中实现 bootstrap 4 加载微调器。

以下是我在代码中所做的

我的.html

<form class="form-inline" id="topicForm" action="" method="POST">
  <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
  <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>

我的.js

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // load data via AJAX
      fetch_data($("#inputTopic").val());
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
      );
    });
});

除了引导文档中显示的微调器未显示外，这有效。 按钮文本正按预期更改为Loading... 想知道我没有对按钮内的微调器做些什么。

密码笔在这里

Answer 1

在使用 4.0 时，您必须为此代码添加 Bootstrap 4.2.1

 $(document).ready(function() { $("#btnFetch").click(function() { // disable button $(this).prop("disabled", true); // add spinner to button $(this).html( `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...` ); }); });

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <div style="margin:3em;"> <form class="form-inline" id="topicForm" action="" method="POST"> <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/> <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button> </form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 2

加载的 CSS 库中似乎不存在微调 CSS。 请尝试以下代码

在 CSS 中

    @keyframes spinner-border {
      to { transform: rotate(360deg); }
    } 
    .spinner-border{
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;
    }
    .spinner-border-sm{
        height: 1rem;
        border-width: .2em;
    }

在JS中

$(document).ready(function() {
    $("#btnFetch").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loadingg...`
      );
    });
});

代码笔

Answer 3

这对我有用。 它将原始文本/html 存储为一个属性并从那里恢复它。

    $(document).ready(function() {
        $("#btnFetch").click(function() {
           var $this = $(this);
           
           //Call Button Loading Function
           BtnLoading($this);
    
           //Call Button Reset Function after AJAX or your code execution
           BtnReset($this);
        });
    });
    
    function BtnLoading(elem) {
        $(elem).attr("data-original-text", $(elem).html());
        $(elem).prop("disabled", true);
        $(elem).html('<i class="spinner-border spinner-border-sm"></i> Loading...');
    }
    
    function BtnReset(elem) {
        $(elem).prop("disabled", false);
        $(elem).html($(elem).attr("data-original-text"));
    }

Answer 4

你可以尝试添加 [In head] 我在你的代码笔中添加了它

  <link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

和这个

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Answer 5

修改 Vinay 的答案以适用于我的情况我只是存储文本而不是 html，因为我的原始按钮在重置时被修改。

function btnLoading(elem) {
    $(elem).attr("data-original-text", $(elem).text()); // <-use .text() instead of .html()
    $(elem).prop("disabled", true);
    $(elem).html('<span class="spinner-border spinner-border-sm align-middle" aria-hidden="true" role="status"></span> loading...');
}

function btnReset(elem) {
    $(elem).prop("disabled", false);
    $(elem).text($(elem).attr("data-original-text"));
}