systemantics

jQue­ry Throb­ber is a plu­gin for the well-known Ja­vas­cript li­bra­ry jQue­ry. It crea­tes a loa­ding ani­ma­tion, rea­dy to be used in your AJAX app­li­ca­ti­ons. Of cour­se, the throb­ber is not li­mi­ted to AJAX.

Do­cu­men­ta­tion

Using the plu­gin is ea­sy:

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

adds a loa­ding ani­ma­tion (›throb­ber‹) to the DOM no­de with the ID ›but­ton‹ which shows up when a click event is trig­ge­red.

The fol­lo­wi­ng is a list of all func­ti­ons pro­vi­ded by the plu­gin:

• $().throb­ber()
  $().throb­ber(event)
  $().throb­ber(op­ti­ons)
  $().throb­ber(event, op­ti­ons)
  event is a string spe­cify­ing the event to which the throb­ber should bind. The default he­re is ›click‹. op­ti­ons is a set of op­ti­ons (see be­low). Bo­th pa­ra­me­ters can be omit­ted.
• $.throb­berS­how(op­ti­ons)
  Im­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()
  Hi­de all throb­bers.

Op­ti­ons

• ajax: ›true‹ if the throb­bers should lis­ten to AJAX events. In this ca­se, the throb­bers are au­to­ma­ti­cal­ly hid­den if all AJAX re­quests are com­ple­ted. ›fal­se‹ if you use AJAX, but want to hi­de the throb­bers ma­nu­al­ly. Default: ›true‹
• de­lay: The ti­meout (in mil­li­se­conds) un­til the throb­ber should ap­pear. Default: ›0‹
• ima­ge: The fi­len­a­me of the throb­ber ima­ge. Default: ›throb­ber.gif‹
• pa­rent: A jQue­ry se­lec­tor spe­cify­ing the pa­rent ele­ment to which the throb­ber should be ap­pen­ded. All other child ele­ments are au­to­ma­ti­cal­ly hid­den when the throb­ber is ap­pen­ded. If this is left blank, the throb­ber re­pla­ces the ele­ment to which it was at­ta­ched. Default: ›‹
• wrap: The HTML co­de that should wrap the throb­ber. Default: ›‹

Tips

If you don't use AJAX, you don't ha­ve to ex­pli­cit­ly set the ›ajax‹ pa­ra­me­ter to ›fal­se‹. ›ajax‹ is me­re­ly pre­sent to pre­vent that ma­nu­al­ly crea­ted throb­bers are hid­den upon com­ple­tion of AJAX re­quests.

The throb­ber ele­ment uses this HTML co­de:

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

You can set wrap­ping co­de using the ›wrap‹ op­tion.

You can crea­te throb­ber ima­ges using http://www.ajax­load.in­fo/.

Examp­les

• $("#but­ton").throb­ber()
  Show a throb­ber when the but­ton is clicked, re­pla­cing the but­ton and stop­ping when all AJAX re­quests are com­ple­ted.
• $("#div").throb­ber("dblclick", {ima­ge: "throb­ber_2.gif"})
  Show a throb­ber when #div is double-clicked, using a cu­stom throb­ber ima­ge.

De­mons­tra­tion

You can try out a de­mons­tra­tion he­re:

--> de­mons­tra­tion

Li­cen­se

jQue­ry Throb­ber is a con­tri­bu­tion to the jQue­ry com­mu­ni­ty and is the­re­fo­re dis­tri­bu­ted as open sour­ce soft­wa­re. The plu­gin is li­cen­sed un­der the 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