8

皆さん、こんにちは。

私は 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>
4

5 に答える 5

16

交換してみる

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/

于 2012-09-03T11:56:19.697 に答える
10

この質問に回答があったかどうかはわかりませんが、まだ回答を探している人のために:

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>
于 2013-01-27T05:58:11.197 に答える
0

これがかなり遅いことはわかっていますが、これを機能させたことがあるかどうか知りたいです。私が少しの間やっていて、それに気づかなかったばかげたことを1つお話しします。スピナーを背景と同じ色にしていたので、見えませんでした。 また、ここに見られるようにJQueryを使用しましたhttps://gist.github.com/its-florida/1290439

于 2013-03-13T14:09:42.830 に答える
0

これを試して：

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);

私はこれを試しませんでしたが、うまくいくはずです。問題が発生した場合は、お知らせください。

于 2012-09-03T11:37:51.953 に答える