2012-03-31 6 views
4

Ich bin nur auf der Suche nach ein bisschen Unterricht wirklich. Ich bin sehr neu in JQuery, also ist alles ein bisschen verschwommen.
Allerdings habe ich ein Formular "Verarbeitung" div, die somewhat zeigt, wenn ein Formular eingereicht wurde.Wie spin.js anstelle eines animierten Gifs zu verwenden ist

Im Moment habe ich ein einfaches div mit einem animierten gif, um seine Sendung visuell zu zeigen.

<div id="loading">Please wait, your news is being submitted... 
<img src="/-/images/addwalk-loader.gif"/> 

Im Idealfall würde Ich mag die animierte GIF mit einer Schleuder durch spin.js erstellt ersetzen, wie ich weiß, dass animierte Gifs weiterhin nicht auf IE animieren, sobald das Formular gesendet wurde .

Das einzige Problem ist, durch die Dokumentation zu schauen, bin ich ein bisschen unsicher, wie ich es implementieren würde. Alle Hinweise würden sehr geschätzt werden! Vielen Dank!

Antwort

8

Wenn Sie ein aktuelles Objekt nicht wie von Janus angegeben drehen möchten, können Sie stattdessen ein neues Spinner-Objekt erstellen und es dann auf der Seite positionieren, wo Sie es haben möchten. Eine Liste der Optionen finden Sie in der Dokumentation!

Beispiel:

var opts = { 
    color: '#000' 
    //etc etc 
}; 
var spinner = new Spinner(opts).spin(); 
$("#loading").appendChild(spinner.el); 

Heres eine Geige mit ihm arbeiten: http://jsfiddle.net/vasco/6Ca8Y/

+0

Also würde ich das Skript wie ich meine jQuery aufrufen, und dann diese zu meiner jQuery-Datei hinzufügen? Tut mir leid, das klingt wahrscheinlich sehr nutzlos, aber ich bin mir nicht ganz sicher! – shorn

+0

@shorn Ich habe die Antwort mit einer Fidel mit einem Arbeitsbeispiel aktualisiert. – vascop

+0

Ahh ausgezeichnet! Ich habe momentan keine Zeit, es auszuprobieren, aber ich denke, ich sollte es jetzt schaffen können. Ich melde mich zurück, wenn ich heute Abend los bin! Vielen Dank! – shorn

3

Es ist wirklich ziemlich einfach. Sie rufen .spin() für das JQuery-Objekt auf, das sich drehen soll. Rufen Sie .spin(false), wenn Sie möchten, dass es stoppt.

Ich habe es selbst here.

1

fand ich eine andere Plugin Activity Indicator, die mehr Optionen anpassen und einfach zu integrieren. Probieren Sie es aus: |

+0

Danke, ich werde es überprüfen! – shorn

Verwandte Themen