Throbber (aka loading animation)

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-10 17:14:36

软件介绍

Throbber creates a loading animation for jQuery, ready to be used in your AJAX applications. Of course, the throbber is not limited to AJAX but can also be triggered manually.

Using the plugin is easy:

$("#button").throbber("click");

adds a loading animation (›throbber‹) to the DOM node with the ID ›button‹ which shows up when a click event is triggered.

The following is a list of all functions provided by the plugin:

  • $().throbber();
    $().throbber(event);
    $().throbber(options);
    $().throbber(event, options);
    event is a string specifying the event to which the throbber should bind. The default here is ›click‹. options is a set of options (see below). Both parameters can be omitted
  • $.throbberShow(options);
    Immediately shows a throbber as specified. If no parent element is specified with options.parent, the throbber will be appended to the element.
  • $.throbberHide();
    Hide all throbbers.

Options

The plugin recognizes several options which are denoted in curly brackets.

  • ajax: ›true‹ if the throbbers should listen to AJAX events. In this case, the throbbers are automatically hidden if all AJAX requests are completed. ›false‹ if you use AJAX, but want to hide the throbbers manually. Default: ›true‹
  • delay: The timeout (in milliseconds) until the throbber should appear. Default: ›0‹
  • image: The filename of the throbber image. Default: ›throbber.gif‹
  • parent: A jQuery selector specifying the parent element to which the throbber should be appended. All other child elements are automatically hidden when the throbber is appended. If this is left blank, the throbber replaces the element to which it was attached. Default: ›‹
  • wrap: The HTML code that should wrap the throbber. Default: ›‹

Tips

If you don't use AJAX, you don't have to explicitly set the ›ajax‹ parameter to ›false‹. ›ajax‹ is merely present to prevent that manually created throbbers are hidden upon completion of AJAX requests.

The throbber element uses this HTML code:

<img src="throbber.gif" class="throbber" />

You can set wrapping code using the ›wrap‹ option.

You can create throbber images using http://www.ajaxload.info/.

Examples

  • $("#button").throbber();
    Show a throbber when the button is clicked, replacing the button and stopping when all AJAX requests are completed.
  • $("#div").throbber("dblclick", {image: "throbber_2.gif"});
    Show a throbber when #div is double-clicked, using a custom throbber image.

License

Throbber is licensed under the GNU Lesser General Public License.

本文地址:https://www.codercto.com/soft/d/23089.html

Learning jQuery

Learning jQuery

Jonathan Chaffer、Karl Swedberg / Packt Publishing / 2007-7-7 / GBP 24.99

jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. In this book, creators of the popular jQuery learning resource, learningquery.com, share the......一起来看看 《Learning jQuery》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具