Html 用于 Twitter Bootstrap .btn 的微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15982233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spinner for Twitter Bootstrap .btn
提问by Andrew Dryga
Im trying to create spinners for Twitter Bootstrap buttons. Spinners should indicate some work in progress (ie. ajax request).
我正在尝试为 Twitter Bootstrap 按钮创建微调器。Spinners 应该指出一些正在进行的工作（即ajax 请求）。
Here is small example: http://jsfiddle.net/AndrewDryga/zcX4h/1/
这是一个小例子：http: //jsfiddle.net/AndrewDryga/zcX4h/1/
HTML (full on jsfiddle):
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:
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;
}
The deal is that css "margin: auto" doesn't produce expected animation and spinner widths for all elements should be defined via css. Is there are any way to solve this problem? Also, maybe there are better way to align/show spinners?
交易是css“margin：auto”不会产生预期的动画，所有元素的微调宽度都应该通过css定义。有没有办法解决这个问题？另外，也许有更好的方法来对齐/显示微调器？
And should i play with buttons padding and make it in way, where button width doesn't change, when spinner is shown or buttons that change width is ok? (If ill put it as snippet somewhere)
我应该使用按钮填充并使其在按钮宽度不改变的地方，当显示微调器或改变宽度的按钮可以吗？（如果不适将其作为片段放在某处）
回答by Andrew Dryga
I was able to fix this problem by using max-width istead of width. Also this is pure CSS solution, so it can be used pretty much everywhere (for example show X mark on tags, when user hover mouse over it, etc).
我能够通过使用 max-width 而不是 width 来解决这个问题。这也是纯 CSS 解决方案，因此它几乎可以在任何地方使用（例如，在标签上显示 X 标记，当用户将鼠标悬停在其上时等）。
Demo: http://jsfiddle.net/AndrewDryga/GY6LC/
演示：http: //jsfiddle.net/AndrewDryga/GY6LC/
New CSS:
新的 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 */
}
回答by Oleksandr Shybystyi
I have updated @andrew-drygasolution to use the currently latest Bootstrap (3.3.5), font-awesome (4.3.0), jQuery (2.1.3) and slightly modified it.
我已更新@andrew-dryga解决方案以使用当前最新的 Bootstrap (3.3.5)、font-awesome (4.3.0)、jQuery (2.1.3) 并对其进行了轻微修改。
Here it is:
这里是：
<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');
});
In addition, you need appropriate CSS modifications (JSFiddle).
此外，您需要适当的 CSS 修改 ( JSFiddle)。
回答by JP Bala Krishna
Very simple solution worked for me was changing the element from
对我有用的非常简单的解决方案是将元素从
<i></i>
with
<em></em>
This was the only change I did.
这是我所做的唯一改变。
回答by Cody Schouten
I found your code to be super helpful. I know it's been a year but I've improved upon the code. I didn't like having to manually add the span and i tags to each element. I tweaked the JavaScript code to add these tags automatically. So all you have to do to add a spinner to a button/link is add the has-spinner class to it and give it a data-spinner="[left|right]" tag (determines which side of your button text the spinner should be placed).
我发现您的代码非常有用。我知道已经一年了，但我已经改进了代码。我不喜欢必须手动将 span 和 i 标签添加到每个元素。我调整了 JavaScript 代码以自动添加这些标签。因此，将微调器添加到按钮/链接所需要做的就是向其添加 has-spinner 类并为其提供一个 data-spinner="[left|right]" 标签（确定按钮文本的哪一侧是微调器应放置）。
Here's the modified JavaScript:
这是修改后的 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 + " ")
spinnerObjects.filter("[data-spinner=right]").append(" " + spinnerHTML)
spinnerObjects.click(function() {
$(this).toggleClass('active');
});
});
});
Here's the link to the fiddle with all the changes (CSS,HTML):
这是包含所有更改（CSS，HTML）的小提琴链接：
