Question

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

下面是我在代码中所做的

my.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>

my.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...。想知道我对按钮内的微调器操作不正确。

Code Pen here

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 type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 2

您是否可以尝试添加[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 3

您可以做自己的微调器，很简单。

如果您单击源，可以转到此链接并选择一个CSS微调器，可以看到CSS代码和html部分。

然后，在Angular项目下，创建一个具有自己的CSS的组件，例如：

@Component({
  selector: 'app-myWonderfulSpinner',
  templateUrl: './myWonderfulSpinner.component.html',
  styleUrls: ['./myWonderfulSpinner.css']
})

将css粘贴到css文件中，将html粘贴到模板文件中。

现在您已经拥有了组件，可以随时在项目中使用它。

在需要使用微调器的页面中，创建一个像这样的结构。

<div *ngIf="isLoading">
<app-myWonderfulSpinner></app-myWonderfulSpinner>
</div>
<div *ngIf="!isLoading">
--your actual page components are here
</div>

在代码内部，您可以相应地定义和设置此isLoading参数。

Answer 4

这对我有用。它将原始文本/ 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 5

在加载的CSS库中似乎没有Spinner 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...`
      );
    });
});

Code Pen

Bootstrap 4在按钮中加载微调

5 个答案: