Twitter Bootstrap的Spinner按钮

Question

Twitter Bootstrap的Spinner按钮

13

我正在尝试为Twitter Bootstrap按钮创建旋转器。旋转器应该表示某些工作正在进行中（例如ajax请求）。

这是一个小例子：http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML（完整代码请参考jsfiddle）：

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

/* ... */

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

交易是这样的，CSS中的“margin：auto”不能为所有元素产生预期的动画和旋转器宽度，应该通过CSS定义所有元素的旋转器宽度。是否有任何方法解决这个问题？此外，也许有更好的方法来对齐/显示旋转器吗？

当显示旋转器时，我应该调整按钮填充并使其不改变按钮宽度，或者可以接受宽度发生变化的按钮吗？（如果我将其放在某个地方作为代码片段）

- Andrew Dryga

它们不是重复的问题，但它们与您的问题有关：https://dev59.com/THA75IYBdhLWcg3wB0VP 和 http://stackoverflow.com/q/3149419/1004046。 - Pigueiras

我已经尝试过使用max-width和:not(.active)选择器来进行调整，但似乎需要为所有元素显式地设置宽度...明天我会尝试使用绝对定位来进行调整。 - Andrew Dryga

1

哇，那是一个漂亮的旋转器！你应该尝试将它加入到Bootstrap中！ - Jon Tirsen

4个回答

4

我已经更新了@andrew-dryga的解决方案，使用了目前最新的Bootstrap(3.3.5)，font-awesome(4.3.0)，jQuery(2.1.3)并进行了轻微的修改。

以下是修改后的代码：

 <button class="btn btn-success has-spinner">
    <i class="fa fa-spinner fa-spin"></i>
    Foo
 </button>

 $('a.has-spinner, button.has-spinner').click(function() {
     $(this).toggleClass('active');
 });

此外，您需要进行适当的CSS修改（JSFiddle）。

- Oleksandr Shybystyi

0

我发现你的代码非常有帮助。虽然已经过去一年了，但我对代码进行了改进。我不喜欢手动为每个元素添加span和i标签。我调整了JavaScript代码以自动添加这些标签。因此，您只需将has-spinner类添加到按钮/链接中，并给它一个data-spinner =“[left | right]”标记（确定旋转器应放置在按钮文本的哪一侧）即可添加旋转器。

以下是修改后的JavaScript代码：

$(function(){

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>",
    spinnerObjects = $(".has-spinner");

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;")
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML)
spinnerObjects.click(function() {
    $(this).toggleClass('active');
});

});

这里是包含所有更改（CSS，HTML）的 fiddle 链接：

http://jsfiddle.net/codyschouten/QKefn/2/

- Cody Schouten

1

谢谢。我在你的代码中遇到了一个问题，你不应该在按钮文本中添加，因为它会破坏按钮文本居中。此外，我更喜欢不使用 JavaScript，因为我不喜欢混合标记和逻辑，所以程序员总是严格声明他想在 HTML 中获取什么。我认为这更符合 Bootstrap 的哲学。 - Andrew Dryga

0

非常简单的解决方案对我有效，就是改变元素从。

<i></i>  
with
<em></em>

这是我所做的唯一更改。

- JP Bala Krishna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Dryga · Accepted Answer

通过使用max-width而不是width，我能够解决这个问题。此外，这是一个纯CSS解决方案，因此它可以在几乎任何地方使用（例如，在用户将鼠标悬停在标记上时显示X标记等）。

演示：http://jsfiddle.net/AndrewDryga/GY6LC/

新CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}