如何在按钮处于加载状态时向按钮添加微调图标? [英] How to add a spinner icon to button when it's in the Loading state?

问题描述

Twitter Bootstrap 的按钮 有一个很好的 Loading... 状态可用.

Twitter Bootstrap's buttons have a nice Loading... state available.

问题是它只是显示了一个像 Loading... 这样通过 data-loading-text 属性的消息，如下所示:

The thing is that it just shows a message like Loading... passed through the data-loading-text attribute like this:

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

查看 Font Awesome，您会看到现在有一​​个动画微调图标.

Looking at Font Awesome, you see that there's now an animated spinner icon.

我尝试在触发 Upload 操作时集成该微调图标，如下所示:

I tried to integrate that spinner icon when firing an Upload operation like this:

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

但这根本没有效果，也就是说，我只看到按钮上的Uploading... 文本.

but this had no effect at all, that is, I just see the Uploading... text on the button.

是否可以在按钮处于加载状态时添加图标?看起来 Bootstrap 只是在加载状态下删除了按钮内的图标 <i class="icon-upload icon-large"></i>.

Is it possible to add an icon when the button is in the Loading state? Looks like somehow Bootstrap just removes the icon <i class="icon-upload icon-large"></i> inside the button while in the Loading state.

这是一个简单的演示，展示了我上面描述的行为.正如您看到的，当它进入 Loading 状态时，图标就会消失.它在时间间隔后立即重新出现.

Here's a simple demo that shows the behavior I describe above. As you see when it enters the Loading state the icon just disappears. It reappears right after the time interval.

推荐答案

如果你看一下 bootstrap-button.js源代码，您将看到引导插件在调用 $(myElem).button('loading')data-loading-text 中的任何内容>.

If you look at the bootstrap-button.js source, you'll see that the bootstrap plugin replaces the buttons inner html with whatever is in data-loading-text when calling $(myElem).button('loading').

对于你的情况，我认为你应该能够做到这一点:

For your case, I think you should just be able to do this:

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

这篇关于如何在按钮处于加载状态时向按钮添加微调图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！