javascript Ladda：微调器不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22482483/
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
Ladda: Spinner not displaying
提问by henrywright
I'm using Laddato introduce some loading effects on my form buttons. See the Ladda demo
我正在使用Ladda在我的表单按钮上引入一些加载效果。见拉达演示
The effect I'm using is zoom-out. This works but the spinner doesn't show. Is there something I'm missing?
我使用的效果是zoom-out。这有效，但微调器不显示。有什么我想念的吗？
My button:
我的按钮：
<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
My JS script(taken from here):
我的 JS 脚本（取自此处）：
var buttons = document.querySelectorAll( '.ladda-button' );
Array.prototype.slice.call( buttons ).forEach( function( button ) {
var resetTimeout;
button.addEventListener( 'click', function() {
if( typeof button.getAttribute( 'data-loading' ) === 'string' ) {
button.removeAttribute( 'data-loading' );
}
else {
button.setAttribute( 'data-loading', '' );
}
clearTimeout( resetTimeout );
resetTimeout = setTimeout( function() {
button.removeAttribute( 'data-loading' );
}, 3000 );
}, false );
} );
The resources I'm loading are:
我正在加载的资源是：
- ladda-themeless.min.css
- ladda.min.js
- spin.min.js
- ladda-themeless.min.css
- 拉达.min.js
- 自旋.min.js
采纳答案by jazZRo
I have this and it works:
我有这个并且它有效：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="dist/ladda.min.css">
</head>
<body>
<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>
<script>
Ladda.bind( '.ladda-button', { timeout: 2000 } );
</script>
</body>
</html>
If you want to stop the button manually, use one of the functions described in the documentation
如果您想手动停止按钮，请使用文档中描述的功能之一
回答by Kahbazi
make sure to include spin.min.jsfirst and then ladda.min.js
确保首先包含spin.min.js然后ladda.min.js
回答by Dan Gravell
I wanted to add this other potential cause of this, which I only just worked out after about an hour of playing around. Note this is not specifically the OP's case, but it is a cause of the spinner not displaying.
我想添加另一个可能的原因，我只是在玩了大约一个小时后才解决的。请注意，这并不是 OP 的具体情况，而是导致 Spinner 不显示的原因。
The spinner will be invisible if it's the same colour as the button! So if you use themeless.cssand your button is a standard btn-defaultyou will not see the spinner!
如果微调器与按钮的颜色相同，它将不可见！因此，如果您使用themeless.css并且您的按钮是标准的，btn-default您将看不到微调器！
Changing the data-spinner-coloror the colour of your button is a fix in this case.
data-spinner-color在这种情况下，更改按钮的颜色或颜色是一种解决方法。
回答by sri
Don't set any text attribute on the button it will override the spinner
不要在按钮上设置任何文本属性，它会覆盖微调器
remove button.setAttribute( 'data-loading', '' );
消除 button.setAttribute( 'data-loading', '' );
