如何使用Spin.js使微调器工作
How to make a spinner work using Spin.js?
大家好,
我是JavaScript的新手,在互联网上进行了大量研究,并尝试实现微调器失败后,我决定问你。
我正在使用Spin.js(http://fgnass.github.com/spin.js/#v1.2.6)。这似乎是一个很好的工具,但我根本无法让它发挥作用。我的问题是我做错了什么?我真的想不通。任何帮助都将不胜感激。非常感谢。
这是我的代码:
<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>
尝试更换
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
带有
$('#spinnerContainer').after(new Spinner(opts).spin().el);
您需要将spin方法创建的html元素附加到dom
下面是一个让你开始的例子http://jsfiddle.net/5CQJP/1/
我不确定这个问题是否得到了答案,但对于那些仍在寻找答案的人来说:
我发现我需要将javascript移到spinnerContainerdiv下面。我相信如果你将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>
这是我的答案。效果很好。
//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>
试试这个:
var target = document.getElementById('spinnerContainer');
//target.style.display = "block";
var spinner = new Spinner(opts);
如果您使用jQuery:
$(target).html(spinner.el);
如果没有,如文件所示:
target.innerHtml = '';
target.appendChild(spinner.el);
我没有试过,但应该有效。如果出现问题,请告诉我。
我知道这太晚了,但我很好奇你是否能做到这一点。我告诉你一件我做了一段时间却没有意识到的愚蠢的事情。我把旋转器做成了与它显示的背景相同的颜色,这就是为什么我看不到它。我还使用了JQueryhttps://gist.github.com/its-florida/1290439像魅力一样工作
相关文章:
- 正在尝试使用if和else添加类,但无法正常工作
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 如何使用modalDialog来显示可以在所有浏览器中工作的弹出窗口
- 下拉列表在使用z索引放置在前面后停止工作
- 密码输入键脚本在首次使用后无法工作
- 使用Jquery ui时滑块无法工作
- 如何检查这个代码点火器php函数是否工作,该函数是否在ajax url中使用
- 转换成ES 5使用babel通过吞咽手表不工作
- 引导程序转盘不工作:堆叠图像(使用rails)
- 为什么javascript有时会这样'不工作?(我使用Ci)
- 将数据从一个工作表复制到另一个工作表;使用目标工作表中的复制数据创建一个表
- Excel 工作表使用 URL 进行修改
- 它不工作"onclick"使用attr()从JQuery
- 跨域GET请求不能在jQuery中工作,使用c#后端服务器
- 返回语句不工作,使用document.write
- 基本的触摸手势不工作,使用hammer.js
- 如何让我的fiddle在第二次输入时工作,使用three.js将对象添加到场景中
- window.close()仅在IE中工作.如何使用javascript关闭firefox窗口中的当前选项卡
- “Keypress"事件不能正常工作,使用jQuery &Select2
- 在我的工作场所使用WebDriver无法打开Firefox,无法在PATH中找到Firefox二进制文件