javascript 如何使用 spin.js 而不是动画 gif
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9955483/
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 use spin.js instead of a animated gif
提问by shorn
I am just looking for a bit of instruction really. I am very new to JQuery, so it's all a bit hazy.
However, I have a form "processing" div that shows somewhatwhen a form has been submitted.
我只是在寻找一些指导。我对 JQuery 很陌生,所以有点模糊。
但是,我有一个表格“处理”的div节目有点当表单已提交。
At the moment I have a simple div with a animated gif to visually show its sending.
目前我有一个带有动画 gif 的简单 div 来直观地显示它的发送。
<div id="loading">Please wait, your news is being submitted...
<img src="/-/images/addwalk-loader.gif"/>
Ideally, I would like to replace the animated gif with a spinner created through spin.js, as I am aware that animated gifs do not continue to animate on IE once the form has been sent.
理想情况下,我想用通过 spin.js 创建的微调器替换动画 gif,因为我知道一旦发送表单,动画 gif 就不会继续在 IE 上设置动画。
The only problem is, looking through the documentation, I am a bit unsure as to how I would implement it. Any pointers would be greatly appreciated! Thanks!
唯一的问题是,查看文档,我有点不确定我将如何实现它。任何指针将不胜感激!谢谢!
回答by vascop
If don't want to spin a current object as noted by Janus, you could instead create a new Spinner object and then position it on the page wherever you want it to be. For a list of options just check the docs!
如果不想像 Janus 指出的那样旋转当前对象,您可以改为创建一个新的 Spinner 对象,然后将其放置在页面上您想要的任何位置。有关选项列表,请查看文档!
Example:
例子:
var opts = {
color: '#000'
//etc etc
};
var spinner = new Spinner(opts).spin();
$("#loading").appendChild(spinner.el);
Heres a fiddle with it working: http://jsfiddle.net/vasco/6Ca8Y/
继承人的小提琴工作:http: //jsfiddle.net/vasco/6Ca8Y/
回答by Janus Troelsen
回答by Developer-Sid
I found another plugin Activity Indicatorwhich have more options to customize and easy to integrate. Have a try :|
我发现了另一个插件Activity Indicator,它有更多的自定义选项并且易于集成。试试看:|