javascript - 如何使用 Spin.js 制作微调器？

Question

大家好，

我是 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>

Answer 1

尝试替换

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/