Wie man einen spinner arbeiten mit Spin.js?

Hallo Jungs,

Ich bin neu in JavaScript und nach Tonnen von Forschung über das Internet und Fehlversuchen bei der Umsetzung einer spinner-habe ich beschlossen Euch zu Fragen.

Ich bin mit Spin.js ( http://fgnass.github.com/spin.js/#v1.2.6 ). Es scheint ein tolles tool, aber ich kann einfach nicht damit es funktioniert. Meine Frage ist was ich falsch mache? Ich kann nicht wirklich herausfinden. Jede Hilfe wird sehr geschätzt. Ich danke Ihnen so sehr.

Hier ist mein 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>

Nichts sticht auf den ersten Blick. Man könnte hinzufügen, einige Konsole.log (), um zu versuchen, um herauszufinden, wo das problem ist. Pro exemple, ist JQuery enthalten in Ihrem code ? Ist Ihr click-Ereignis registriert ist ?
Die Spin.js enthalten ist (man sieht es an der Spitze von meinem Stück code). Auch das click-Ereignis der ganz gut funktioniert (die speichern-operation wird durchgeführt, wie es sollte), aber der spinner erscheint nicht, obwohl der Speichervorgang einige Zeit dauert 5-6 Sekunden. Danke für den Versuch mir zu helfen 🙂

InformationsquelleAutor SunnyDay | 2012-09-03

15

Versuchen, anstelle
```
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
```
mit
```
$('#spinnerContainer').after(new Spinner(opts).spin().el);
```
Müssen Sie fügen Sie den html-element der spin-Methode erstellt die dom

Hier ist ein Beispiel, um Ihnen den Einstieg http://jsfiddle.net/5CQJP/1/
- Offenbar, mein code ist sehr stur und es geht einfach nicht arbeiten wollen, trotz der > 10 Versionen, die ich bisher ausprobiert habe. Wie auch immer, danke 🙂
- so wie halt der spinner???
- Wenn Sie brauchen, um es zu stoppen, dann müssen Sie speichern die Instanz der neue Spinner auf eine variable, und rufen Sie dann die stop-Methode.
- Ich habe versucht, "$('#spinnerContainer').nach(neuer Spinner(opts).stop().el);" Es hat nicht funktioniert für mich.Hilfe!!!!
- Beispiel, spinner, spinning für 2 Sekunden. var s = new Spinner(opts); $('#spinnerContainer').nach(en.spin().el); setTimeout(en.stop.bind(s), 2000);
InformationsquelleAutor James Kyburz

Ich bin nicht sicher, ob diese Frage schon mal beantwortet, aber für diejenigen, die noch auf der Suche nach einer Antwort:

Fand ich heraus, dass ich brauchte, um das verschieben des Codes unterhalb der spinnerContainer div. Ich glaube, das würde auch funktionieren, wenn Sie das javascript im onload-Ereignis. Hier ist was ich getan habe:

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

Der spinner wird angezeigt in der oberen linken Ecke . Wie positionieren?
try { top: '50%', Links: '50%' } .[Verweisen] (fgnass.github.io/spin.js) für mehr details
var ziel2 = document.getElementById('spinnerContainer'); var spinner2 = new Spinner(opts).stop(target2); Es ist nicht zu stoppen, der spinner.Keine Ahnung ?

InformationsquelleAutor minchYoda

Hier ist meine Antwort. Funktioniert Super.

//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>

InformationsquelleAutor Apollo

0

Versuchen Sie dies:
```
var target = document.getElementById('spinnerContainer');
           //target.style.display = "block";
           var spinner = new Spinner(opts);
```
Wenn Sie jQuery verwenden:
```
           $(target).html(spinner.el);
```
Wenn nicht, wie in der Dokumentation:
```
           target.innerHtml = '';
           target.appendChild(spinner.el);
```
Ich nicht versuchen, diese, aber es sollte funktionieren. Wenn ein problem Auftritt, lassen Sie es mich wissen.
- Danke für deine Antwort :). Ich habe versucht, beide Versionen, aber die spinner immer noch nicht angezeigt. Ich habe keine Ahnung, warum das nicht funktioniert,denn ich bin ziemlich sicher, dass das Skript gut ist (die Bewertungen waren großartig), aber ich siply weiß nicht, wo mein Fehler ist.
- Haben Sie enthalten jQuery überall im code?
- können Sie zeigen ein jsfiddle für diese.
InformationsquelleAutor Lupus
0

Ich weiß, das ist viel zu spät, aber ich bin neugierig, wenn Sie jemals bekam dies funktioniert. Ich werde Ihnen sagen, eine dumme Sache, die ich Tat, für ein wenig, und es nicht realisieren. Ich war der spinner der gleichen Farbe wie der hintergrund wäre es angezeigt, gegen und das ist, warum ich es nicht sehen konnte. Auch ich verwendet JQuery wie hier zu sehen https://gist.github.com/its-florida/1290439
Arbeitete wie ein Charme
- Hey, danke für die Antwort. Schließlich entdeckte ich, dass, aufgrund der Art, wie meine Anwendung gebaut wurde, hatte ich einen Rückruf zu einem bestimmten moment, sagte meine spinner. Eigentlich ist der spinner arbeitete, aber aufgrund der Tatsache, dass der callback zum auftreten Recht schnell, ich war nicht in der Lage, tatsächlich sehen, es funktioniert.
InformationsquelleAutor snowleopard

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.