JQuery plug in development guide

So let's start with a simple look at the most orthodox definition of jQuery plug-ins:

(function ($) {     

$.fn. The plugin name  = function (settings) {         

//Default parameter & NBSP;               < br / >
var defaultSettings = {

 

        }                 

 

settings = $.extend(defaultSettings, settings);

 

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

 

} })(jQuery);

 
Let's look at the first line of code in the template (although we'll have to split the second half of the line, otherwise the first line will be completely meaningless) :

(function ($) {

 

})(jQuery);

  This line of code is actually used to create an anonymous function. If you are not familiar with anonymous functions and closures, you will be very confused about this kind of code, so it is highly recommended that you read this article [link: #].

JQuery's inheritance method $.extend -- $.extend has a very important role in jQuery plug-in development, which is to merge parameters.

$.fn.tip = function (settings) {     

var defaultSettings = {            

//Color         < br / >
color: 'yellow',        

//Delay               < br / >
timeout: 200     }

    

settings = $.extend(defaultSettings, settings);    

alert(settings.input); <br>}

  JQuery plug-ins define the second way:

(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 method 

    $.fn.tabpanel.methods =

    {

        //Initialize 

        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 / >
    }

<br>})(jQuery);<br><br> call   $("#team").tabpanel('add',"");

Well, the above two kinds of development methods are the most commonly used, friends to learn it well first, we will introduce more in-depth