jquery Plugin Development

There are two types of jquery plugin development:

One is the development of a class-level plug-in that adds a new global function to jquery, which is equivalent to adding a method to the jquery class itself. The global function of jquery is a function that belongs to the jquery namespace, and the other is the object-level plug-in development that adds a method to the jquery object. The following is a detailed description of the development of the two functions.

Class-level plug-in development

Custom Global functions

Jquery.foo = function () {     alert (' This is a test. This was only a test. ');  Jquery.bar = function (param) {     alert (' This function takes a parameter, which is "' + param + '". ');  };   

Using Jquery.extend (object)

Jquery.extend ({        foo:function () {          alert (' This is a test. This was only a test. ')        ,        bar:function (param) {          alert (' This function takes a parameter, which is "' + para M + ' ". ');        }     

　　

Object-level plug-in development

Plug-in development at the object level requires two forms:

Form 1:

(function ($) {       $.fn.extend ({         pluginname:function ($) {opt,callback) {               //Our plugin implementation code goes here.           }       })     

　　

Form 2:

(function ($) {         $.fn.pluginname = function () {          //Plugin Implementation code goes here       };     

　　

The above defines a jquery function, the parameter is $, and after the function definition is complete, the jquery argument is passed in. Call execution immediately. The advantage of this is that when we write a jquery plugin, we can also use this alias, without causing a conflict with prototype.

Call samples such as Next

$ (' #myDiv '). Hilight ();

　　

Accept the options parameter to control plug-in behavior

Plugin definition    $.fn.hilight = function (options) {      var defaults = {        foreground: ' Red ',        background: ' Yellow '      };      Extend Our default options with those provided.      var opts = $.extend (defaults, options);      Our plugin implementation code goes here.    };    Our plugin can be called this way:  $ (' #myDiv '). Hilight ({      foreground: ' Blue ')    

　　

Resources

jquery Plugin Development Full analysis

jquery Plugin Development