如何将一个微调图标添加到按钮时，它在加载状态？ [英] How to add a spinner icon to button when it's in the Loading state?

问题描述

的按钮有一个很好的加载... 状态可用。

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

的事情是，它只是显示像加载... 通过数据加载文本通过属性是这样的：

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>

综观字体真棒，你看到有现在是一位动画旋转的图标。

我试图集成了微调图标射击这样一个上传运行时：

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');

但没有任何效果可言，就是我刚才看到的上传... 按钮文字。

是否可以添加一个图标时，该按钮处于加载状态？看起来在某种程度上引导只是删除了图标＆LT; I类=图标上传图标大＆GT;＆LT; / I＆GT; 按钮内部，而在加载状态。

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.

推荐答案

如果你看一下引导，button.js 源代码，你会看到引导插件替换按钮内部HTML与无论是在的数据加载文本的调用时 $（myElem）.button（'装'） 。

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屋！