关于html：Spinner for Twitter Bootstrap .btn


Spinner for Twitter Bootstrap .btn

我正在尝试为Twitter Bootstrap按钮创建微调器。微调器应指出一些正在进行的工作(例如ajax请求)。

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

HTML(在jsfiddle上完整显示)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></span>
    Foo
  </button>
</p>

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

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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定义。有什么办法可以解决这个问题？另外，也许有更好的方式对齐/显示微调框？

我应该使用按钮填充并使其顺畅地进行吗，当显示微调框或可以改变宽度的按钮没问题时，按钮的宽度不会改变？ (如果生病了，请将其作为摘要显示在某处)

相关讨论

我能够通过使用最大宽度而不是宽度来解决此问题。这也是纯CSS解决方案，因此几乎可以在任何地方使用(例如，在标签上显示X标记，当用户将鼠标悬停在其上时，等等)。

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

新CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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 */
}
相关讨论

我已经更新了@ andrew-dryga解决方案，以使用当前最新的Bootstrap(3.3.5)，超棒的字体(4.3.0)，jQuery(2.1.3)并对其进行了少许修改。

这里是：

1
2
3
4
5
6
7
8
 <button class="btn btn-success has-spinner">
    <i class="fa fa-spinner fa-spin">
    Foo
 </button>

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

此外，您需要适当的CSS修改(JSFiddle)。

对我来说非常简单的解决方案是将元素从

更改为

1
with

这是我所做的唯一更改。

我发现您的代码超级有帮助。我知道已经一年了，但是我对代码进行了改进。我不喜欢必须手动将span和i标签添加到每个元素。我调整了JavaScript代码以自动添加这些标签。因此，向按钮/链接添加微调器所需要做的就是向其添加has-spinner类，并为其提供一个data-spinner =" [left | right]"标签(确定按钮的哪一侧发短信给微调器应该放置)。

这是经过修改的JavaScript：

1
2
3
4
5
6
7
8
9
10
$(function(){

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

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

});

以下是所有更改(CSS，HTML)到小提琴的链接：

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

相关讨论