JQuery plugin development guide_jquery-js tutorial

With its simple API, jQuery is more and more popular with web developers for its powerful DOM manipulation and scalability. Some people often ask for some tips, therefore, writing such an article for jQuery fans is a reference. First, let's take a simple look at the most orthodox jQuery plug-in definition:

The Code is as follows:

(Function ($ ){
$. Fn. Plug-in name = function (settings ){
// Default parameter
Var defaultSettings = {

}/* Merge the default parameters and user-defined parameters */

Settings = $. extend (defaultSettings, settings );

Return this. each (function () {// code}); // The plug-in appears multiple times within the element

}) (JQuery );

First, let's look at the first line of code in the template (of course we need to pull out the second half of this line of code, otherwise the first line will be completely meaningless ):

The Code is as follows:

(Function ($ ){

}) (JQuery );

This line of code is actually used to create an anonymous function. If you do not know about anonymous functions and closures, you will be very confused about this code. Therefore, we strongly recommend that you read [Details about JavaScript anonymous functions and closures.

JQuery's Inheritance Method $. extend -- $. extend plays an important role in jQuery plug-in development and is used to merge parameters.

The Code is as follows:

$. Fn. tip = function (settings ){
Var defaultSettings = {
// Color
Color: 'yellow ',
// Latency
Timeout: 200}
/* Merge the default parameters and user-defined parameters */
Settings = $. extend (defaultSettings, settings );
Alert (settings. input );
}

JQuery plugin defines the second method:

The Code is as follows:

(Function ($ ){
// Plug-in definition -- change the name
$. Fn. tabpanel = function (method ){
Var methods = $. fn. tabpanel. methods;
If (methods [method]) {
Return methods [method]. apply (this, Array. prototype. slice. call (arguments, 1 ));
} Else if (typeof method = 'object' |! Method ){
Return methods. init. apply (this, arguments );
} Else {

}
}
// Supported Methods
$. Fn. tabpanel. methods =
{
// Initialization
Init: function (p_options ){
TabpanelBind (p_options, this );
},
Add: function (p_options ){
AddTab (p_options, this );
TabpanelBind (p_options, this );
// Debugger
}}
Function add (p_options ){
Var _ defaults = {
Id :""
}

// Internal implementation .........
Return _ index;
}

}) (JQuery );

Call $ ("# team"). tabpanel ('add ',"");

All right, the two development methods described above are the most common. Let's take a good look at them. We will introduce them more deeply later.