Javascript-jquery-Plugins

Plugins (Plugin)

Livequery Plug-in

For example, if you bind the click event for all the div on the page, then if you then dynamically create a div to insert the document, the DIV will not have the Click event, and the Livequery plugin will enable the dynamically created elements to automatically register the event.

Livequery (Type,x,y)

Bind events for jquery objects (including elements that are dynamically inserted using JavaScript), type is the event trigger, X is the event listener, and Y is the callback method after the optional event completes.

$ (document). Ready (function  () {    // use Livequery bind event    $ (' a '). Livequery (' Click ',function  () {        ads.preventdefault ()        ADS.log.write ($ (this). Text ( ));    })     // the dynamically created a element is also automatically bound to the event    $ ("<a href= >4</a>"). AppendTo (document.body);}); <a href= ' >1</a><a href= ' >2</a><a href= ' >3</a>

JQuery UI Plugin

A complete set of Web UI-based plug-ins, this plugin is broadly divided into three sections as follows:

Interaction { Drag, placement, zoom, select, sort. }

Widgets { accordion navigation, autocomplete, Color picker, dialogs, sliders, labels, calendars, Magnifier, progress bar, spinner, history, layout, tables, menus, tooltips, trees, toolbars, upload components . }

effects { Rich animations do not require animate methods to achieve more powerful animations. }

Custom Plugins

Add a static method to jquery

You can use the Extend method to add a static method to a JQuery object, a static method that belongs to a member of the constructor, not to an instance object, so it is called using the $. Method name.

$.extend (x)

X is an object, or it can be an anonymous object, and the custom method is defined as an attribute of x, and a static method is added for jquery.

// define a Trace function function Trace () {    alert (' hello ');} // use it as a static method of jquery $.extend ({    trace:trace}); // static method of using jquery $.trace ();

View Code

Add a method to a jquery prototype

You can use the Fn.extend method to add a prototype method to a JQuery object, which belongs to the jquery object, which belongs to the instance object, so it is invoked with an instance of $. Method name.

$.fn.extend (x)

// define a Trace function function Trace () {    alert (' hello ');} // use it as a prototype method of jquery $.fn.extend ({    trace:trace}); // jquery objects automatically inherit the prototype method $ ("#box"). Trace ()

View Code

Writing plugins for jquery

Both of these methods can add static or instance methods to jquery, but it is not as convenient to customize a plugin library. You only need to define an anonymous function, the anonymous function needs to receive a parameter, the parameter =$. Make the function self-running and pass jquery as an argument to it, using it to run. Then we just need to put all the custom methods we have written into the anonymous function.

(function  ($) {    // Define a jquery static method for trace    $.extend ({        trace: Trace    });     // define a trace function    function Trace () {        alert (' hello ');    }}) (jQuery) $.trace ();

View Code

(function  ($) {    // Define a jquery prototype method for trace    $.fn.extend ({        trace: Trace    });     // define a trace function    function Trace () {        alert (' hello ');    }}) (jQuery) $ (document). Trace ();

View Code

Javascript-Learning Total Directory

Javascript-jquery-Plugins