JQuery plugin Development Guide and jquery Development Guide

JQuery plugin Development Guide and jquery Development Guide

First, let's take a simple look at the most orthodox jQuery plug-in definition:

Copy codeThe 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 ):

Copy codeThe 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.

Copy codeThe 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); <br>}

JQuery plugin defines the second method:

Copy codeThe 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 :""
}
<Br> // internal implementation ...... <br> return _ index;
}
<Br >}) (jQuery); <br> 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.