Javascript 如何使用 Spin.js 使微调器工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12246854/
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
How to make a spinner work using Spin.js?
提问by SunnyDay
Hello guys,
大家好，
I am new at JavaScript and after tons of research on the Internet and failed attempts on implementing a spinner I decided to ask you.
我是 JavaScript 新手，在互联网上进行了大量研究并尝试实现微调器失败后，我决定问你。
I am using Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6). It seems to be an great tool, but I simply cannot make it work. My question is what I doing wrong? I cannot really figure it out. Any help will be much appreciated. Thank you so much.
我正在使用 Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6)。它似乎是一个很棒的工具，但我根本无法让它发挥作用。我的问题是我做错了什么？我真的想不通。任何帮助都感激不尽。非常感谢。
Here is my piece of code:
这是我的一段代码：
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
function spinnerInit() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto', // Left position relative to parent in px
visibility: true
};
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts).spin(target);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnPerformSave').click(function () {
spinnerInit();
});
});
</script>
<div id="spinnerContainer" class="spinner" style="width: 100%; height: 150%;
position: absolute; z-index: 100; background-color: Gray;
left: 0; top: 0; bottom: 0;right: 0">
</div>
回答by James Kyburz
Try replacing
尝试更换
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
with
和
$('#spinnerContainer').after(new Spinner(opts).spin().el);
You need to append the html element the spin method creates to the dom
您需要将 spin 方法创建的 html 元素附加到 dom
Here is an example to get you started http://jsfiddle.net/5CQJP/1/
这是一个让您入门的示例http://jsfiddle.net/5CQJP/1/
回答by minchYoda
I am not sure if this question ever got answered, but for those who are still looking for an answer:
我不确定这个问题是否得到了回答，但对于那些仍在寻找答案的人来说：
I found out that I needed to move the javascript underneath the spinnerContainer div. I believe this would also work if you put the javascript in an onload event. Here is what I did:
我发现我需要将 javascript 移动到 spinnerContainer div 下。我相信如果您将 javascript 放在 onload 事件中，这也会起作用。这是我所做的：
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
回答by Apollo
Here is my answer. Works great.
这是我的答案。效果很好。
//Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>
<button id="btnSearchClick">Search</button>
//Displays Loading Spinner
<div id="loading">
<div id="loadingcont">
<p id="loadingspinr">
</p>
</div>
</div>
<script type="text/javascript">
//On button click load spinner and go to another page
$("#btnSearchClick").click(function () {
//Loads Spinner
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var trget = document.getElementById('loading');
var spnr = new Spinner(opts).spin(trget);
//Go another page.
window.location.href = "http://www.example.com/";
});
</script>
回答by Lupus
Try this:
尝试这个：
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
If you use jQuery:
如果您使用 jQuery：
$(target).html(spinner.el);
If not, as in the documentation:
如果没有，如文档中所示：
target.innerHtml = '';
target.appendChild(spinner.el);
I didn't try this but it should work. If a problem occurs, just let me know.
我没有尝试这个，但它应该工作。如果出现问题，请告诉我。
回答by snowleopard
I know this is way late but I am curious if you ever got this to work. I'll tell you one dumb thing I was doing for a bit and didn't realize it. I was making the spinner the same color as the background it would be showing up against and that's why I couldn't see it. Also I used JQuery as seen here https://gist.github.com/its-florida/1290439Worked like a charm
我知道这已经很晚了，但我很好奇你是否曾经让它起作用。我会告诉你一件愚蠢的事情，我做了一段时间但没有意识到这一点。我正在使微调器与它显示的背景颜色相同，这就是我看不到它的原因。我还使用了 JQuery，如下所示https://gist.github.com/its-florida/1290439像魅力一样工作
