jQuery Throbber ist ein Plugin für die Javascript-Bibliothek jQuery. Throbber erzeugt Lade-Animationen, die Sie in Ihren AJAX-Anwendungen verwenden können. Natürlich ist Throbber nicht auf AJAX beschränkt.
Dokumentation
Die Verwendung des Columnize-Plugins ist einfach:
$("#button").throbber("click")
fügt eine Lade-Animation (einen ›throbber‹) zum DOM-Knoten mit der ID ›button‹ hinzu. Die Animation wird anzeigt, wenn Sie auf den Button klicken.
Das Plugin enthält einige Funktionen:
- $().throbber()
$().throbber(event)
$().throbber(options)
$().throbber(event, options)
event ist ein String, der das Event bezeichnet, an welches der Throbber gebunden werden soll. Die Voreinstellung ist hier ›click‹. options ist eine Menge von Optionen (siehe unten). Beide Parameter können weggelassen werden. - $.throbberShow(options)
Zeigt sofort einen Throbber an. Wenn nicht mittels options.parent ein Element angegeben wird, welches der Throbber angehängt werden sollImmediately shows a throbber as specified. If no parent element is specified with options.parent, the throbber will be appended to the element. - $.throbberHide()
- Versteckt alle Throbber.
Optionen
- ajax: ›true‹, wenn die Throbber auf AJAX-Events hören sollen. In diesem Fall werden die Throbber automatisch ausgeblendet, wenn alle AJAX-Anfragen abgeschlossen sind. ›false‹, wenn Sie AJAX verwenden, aber die Throbber manuell ausblenden wollen. Voreinstellung: ›true‹
- delay: Die Zeit (in Millisekunden), nach welcher der Throbber erscheinen soll. Voreinstellung: ›0‹
- image: Der Dateiname des Throbber-Bildes. Voreinstellung: ›throbber.gif‹
- parent: Ein jQuery-Selektor, welche das Element angibt, an welches der Throbber angehängt werden soll. Alle anderen Kindelemente dieses Elements werden automatisch ausgeblendet, wenn der Throbber angehängt wird. Wenn diese Option leer gelassen wird, ersetzt der Throbber das Element, auf dessen Ereignisse er hört. Voreinstellung: ›‹
- wrap: HTML-Code, welcher den Throbber umhüllen soll. Voreinstellung: ›‹
Tipps
Wenn Sie kein AJAX verwenden, müssen Sie den ›ajax‹-Parameter nicht ausdrücklich auf ›false‹ setzen. ›ajax‹ verhindert nur, dass manuell erzeugte Throbber nach dem Ende von AJAX-Anfragen ausgeblendet werden.
Das Throbber-Element wird aus dem folgenden HTML-Code erzeugt:
<img src="throbber.gif" class="throbber" />
Mit der ›wrap‹-Option können Sie HTML-Code festlegen, welcher diesen HTML-Code umhüllen soll.
Throbber-Bilder können Sie sehr einfach auf http://www.ajaxload.info/ erzeugen.
Beispiele
- $("#button").throbber()
Zeigt einen Throbber an, wenn der Button angeklickt wird. Der Throbber ersetzt den Button und wird wieder ausgeblendet, wenn alle AJAX-Anfragen beendet sind. - $("#div").throbber("dblclick", {image: "throbber_2.gif"})
Zeigt einen Throbber an, wenn das DIV doppelt geklickt wird. Der Throbber verwendet eine besondere Grafik.
Demonstration
Sie können sich eine Demonstration des Plugins ansehen:
--> Demonstration (nur auf Englisch)
Lizenz
jQuery Throbber ist ein Beitrag zur jQuery-Community und wird deshalb als Open Source-Software vertrieben. Das Plugin steht unter der GNU Lesser General Public License.
Download
Please go to the project website in the jQuery plugin repository to download the latest release.
--> website