So first let's take a quick look at the most orthodox JQuery plug-in definition way:
Copy Code code as follows:
(function ($) {
$.fn. Plugin name = function (settings) {
Default parameters
var defaultsettings = {
/* Merge default parameters and user-defined parameters * *
Settings = $.extend (defaultsettings, settings);
Return This.each (function () {//code}); Plug-ins appear multiple times within an element
}) (JQuery);
Take a look at the first line of code in the template (of course we're going to pull the second half of this line of code together, otherwise the first line is completely meaningless):
Copy Code code as follows:
(function ($) {
}) (JQuery);
This line of code is actually used to create an anonymous function. If you are not aware of anonymous functions and closures, you will be very confused about this code, so it is highly recommended that you read the article "dwell on JavaScript anonymous functions and closures".
The inheritance method of jquery $.extend--$.extend has an important role in the development of jquery plug-ins, which is used to merge parameters.
Copy Code code as follows:
$.fn.tip = function (settings) {
var defaultsettings = {
Color
Color: ' Yellow ',
Delay
TIMEOUT:200}
/* Merge default parameters and user-defined parameters * *
Settings = $.extend (defaultsettings, settings);
alert (settings.input); <br>}
The JQuery plug-in defines the second way:
Copy Code code as follows:
(function ($) {
Plug-in definition--replace 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 =
{
Class
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 slightly .........<br> return _index;
}
<BR>}) (JQuery);<br><br> call $ ("#team"). TabPanel (' Add ', "");
Well, the above 2 kinds of development methods are the most commonly used, small partners to learn the next bar, we will introduce more in-depth
