systemantics

<!-- throbber -->

Dr. Lutz Issler
Mauerstr. 10-12
52064 Aachen
GERMANY
T +49 241 94315680
mail@systemantics.net
EN / DE

Lade-Animationen für jQuery

jQue­ry Throb­ber ist ein Plu­gin für die Ja­vas­cript-Bi­blio­thek jQue­ry. Throb­ber er­zeugt La­de-Ani­ma­tio­nen, die Sie in Ih­ren AJAX-An­wen­dun­gen ver­wen­den können. Natürlich ist Throb­ber nicht auf AJAX be­schränkt.

Do­ku­men­ta­tion

Die Ver­wen­dung des Co­lum­ni­ze-Plug­ins ist ein­fach:

$("#but­ton").throb­ber("click")

fügt ei­ne La­de-Ani­ma­tion (ei­nen ›throb­ber‹) zum DOM-Kno­ten mit der ID ›but­ton‹ hin­zu. Die Ani­ma­tion wird an­zeigt, wenn Sie auf den But­ton kli­cken.

Das Plu­gin enthält ei­ni­ge Funk­tio­nen:

  • $().throb­ber()
    $().throb­ber(event)
    $().throb­ber(op­ti­ons)
    $().throb­ber(event, op­ti­ons)

    event ist ein String, der das Event be­zeich­net, an wel­ches der Throb­ber ge­bun­den wer­den soll. Die Vor­ein­stel­lung ist hier ›click‹. op­ti­ons ist ei­ne Men­ge von Op­tio­nen (sie­he un­ten). Bei­de Pa­ra­me­ter können weg­ge­las­sen wer­den.
  • $.throb­berS­how(op­ti­ons)
    Zeigt so­fort ei­nen Throb­ber an. Wenn nicht mit­tels op­ti­ons.pa­rent ein Ele­ment an­ge­ge­ben wird, wel­ches der Throb­ber an­gehängt wer­den sol­lIm­me­dia­te­ly shows a throb­ber as spe­ci­fied. If no pa­rent ele­ment is spe­ci­fied with op­ti­ons.pa­rent, the throb­ber will be ap­pen­ded to the ele­ment.
  • $.throb­ber­Hi­de()
  • Ver­steckt al­le Throb­ber.

Op­tio­nen

  • ajax: ›true‹, wenn die Throb­ber auf AJAX-Events hören sol­len. In die­sem Fall wer­den die Throb­ber au­to­ma­tisch aus­ge­blen­det, wenn al­le AJAX-An­fra­gen ab­ge­schlos­sen sind. ›fal­se‹, wenn Sie AJAX ver­wen­den, aber die Throb­ber ma­nu­ell aus­blen­den wol­len. Vor­ein­stel­lung: ›true‹
  • de­lay: Die Zeit (in Mil­li­se­kun­den), nach wel­cher der Throb­ber er­schei­nen soll. Vor­ein­stel­lung: ›0‹
  • ima­ge: Der Da­tein­ame des Throb­ber-Bil­des. Vor­ein­stel­lung: ›throb­ber.gif‹
  • pa­rent: Ein jQue­ry-Se­lek­tor, wel­che das Ele­ment an­gibt, an wel­ches der Throb­ber an­gehängt wer­den soll. Al­le an­de­ren Kin­d­ele­men­te die­ses Ele­ments wer­den au­to­ma­tisch aus­ge­blen­det, wenn der Throb­ber an­gehängt wird. Wenn die­se Op­tion leer ge­las­sen wird, er­setzt der Throb­ber das Ele­ment, auf des­sen Er­eig­nis­se er hört. Vor­ein­stel­lung: ›‹
  • wrap: HTML-Co­de, wel­cher den Throb­ber umhüllen soll. Vor­ein­stel­lung: ›‹

Tipps

Wenn Sie kein AJAX ver­wen­den, müssen Sie den ›ajax‹-Pa­ra­me­ter nicht aus­drück­lich auf ›fal­se‹ set­zen. ›ajax‹ ver­hin­dert nur, dass ma­nu­ell er­zeug­te Throb­ber nach dem En­de von AJAX-An­fra­gen aus­ge­blen­det wer­den.

Das Throb­ber-Ele­ment wird aus dem fol­gen­den HTML-Co­de er­zeugt:

<img src="throb­ber.gif" class="throb­ber" />

Mit der ›wrap‹-Op­tion können Sie HTML-Co­de fest­le­gen, wel­cher die­sen HTML-Co­de umhüllen soll.

Throb­ber-Bil­der können Sie sehr ein­fach auf http://www.ajax­load.in­fo/ er­zeu­gen.

Bei­spie­le

  • $("#but­ton").throb­ber()
    Zeigt ei­nen Throb­ber an, wenn der But­ton an­geklickt wird. Der Throb­ber er­setzt den But­ton und wird wie­der aus­ge­blen­det, wenn al­le AJAX-An­fra­gen be­en­det sind.
  • $("#div").throb­ber("dblclick", {ima­ge: "throb­ber_2.gif"})
    Zeigt ei­nen Throb­ber an, wenn das DIV dop­pelt geklickt wird. Der Throb­ber ver­wen­det ei­ne be­son­de­re Gra­fik.

De­mons­tra­tion

Sie können sich ei­ne De­mons­tra­tion des Plug­ins an­se­hen:

--> De­mons­tra­tion (nur auf Eng­lisch)

Li­zenz

jQue­ry Throb­ber ist ein Bei­trag zur jQue­ry-Com­mu­ni­ty und wird des­halb als Open Sour­ce-Soft­wa­re ver­trie­ben. Das Plu­gin steht un­ter der GNU Les­ser Ge­ne­ral Pu­blic Li­cen­se.

Dow­n­load

Plea­se go to the pro­ject web­si­te in the jQue­ry plu­gin re­po­si­to­ry to dow­n­load the la­test re­lea­se.

--> website