jquery Plugin Development

The so-called "plug-in" is the user's own new method of jquery instance object. Because the method is shared by all instances, it can only be defined on the prototype object (prototype) of the jquery constructor. For the user, it is very convenient to use some commonly used operations as plug-ins (plugin).

Plug-in authoring

In essence, the jquery plug-in is a method that defines the prototype object in the jquery constructor, which allows instances of all jquery objects to share this method. Because the prototype object of the jquery constructor is abbreviated to the Jquery.fn object, the plugin is defined in the following way.

JQuery.fn.myPlugin = function () {//do your awesome plugin stuff here};

A better approach would be to use the following notation so that the dollar sign ($) can be used freely in the body of the function.

;(function ($) {$.fn.myplugin = function () {//do your awesome plugin stuff here};}) (JQuery);

The top of the code above has a semicolon, which is to prevent multiple script files from merging when the end statements of other scripts do not add semicolons, resulting in a run-time error.

Sometimes, the top-level object (window) can be entered as a parameter, which speeds up the execution of the code and performs a more efficient minimization operation.

;(function ($, window) {$.fn.myplugin = function () {//do your awesome plugin stuff here};} (JQuery, window));

Note that inside the plug-in, the This keyword refers to an instance of a jquery object. In the general jquery callback function, the This keyword refers to the DOM object.

 (function  ($) {  $.fn.maxheight = function  () {    var  max = 0;    //  the following this, which refers to a jquery object instance      Inside the This.each (function ()  {        //  callback function, this refers to the DOM object          max = math.max (max, $ (this). Height ());     });     return max;  };}) (jQuery); 

Above the function of this maxheight plugin is to return the height of the tallest object in a series of Dom objects.

In most cases, the plug-in should return the jquery object so that it can maintain chained operations.

(function ($) {$.fn.greenify = function () {THIS.CSS ("color", "green");  return this; };}) (jQuery); $ ("a"). Greenify (). addclass ("greenified");

The above code returns the This object, which is the JQuery object instance, so you can follow the chain operation.

For result sets that contain multiple jquery objects, the Each method can be used for processing.

$.fn.mynewplugin = function () {return This.each (function () {//Process each object});

plug-ins can accept a Property object parameter.

 (function  ($) {  $.fn.tooltip = function  (options) {     Var settings = $.extend ( {       ' location '           :  ' top ',       ' Background-color '  :   ' Blue '     }, options);     return this.each (function   () {      //  fill in plug-in code     });   };}) (jQuery); 

The above code uses the Extend method to set the default value of the property for the Parameter object.

Instance

Below is a plugin that adds an href attribute of element A to a Web page.

 (function ($) {    $.fn.showlinklocation = function ()  {         return this.filter (' a '). Append (function () {             return  '   ('  + this.href +  ') ';         });     };} (JQuery)); /  Usage $ (' a '). Showlinklocation (); 

As you can see from the code above, the development and use of plugins is very simple.

Release of Plugins

After writing the plugin, you can post it on the official jquery website.

First, write a plug-in information file YourPluginName.jquery.json. The yourpluginname in the file name represents your plug-in name.

{   "name":  "Plugin_name",   "title":  "Plugin_long_title",   "description ": " ... ",  " keywords ":  [" jquery ", " Plugins "],  " version ": " 0.0.1 ",    "Author": {     "name":  "...",     "url":  " ... "  },  " maintainers ": [    {        "name":  "...",       "url":  "..."     }   ],   "licenses": [    {       "type":   "MIT",       "url":  "http://www.opensource.org/licenses/ mit-license.php "    }  ],  " Bugs ": " ... ", // bugs  url   "homepage":  "...", // homepage url   "docs":  "...",  //  docs url   "Download":  "...", // download url   "dependencies": {     "jquery" :  ">=1.4"   }}

above is an instance of a plugin information file.

Then, post the code file to GitHub, click on the" Service hooks/webhook URLs "option on the Settings page and fill in the URL http// Plugins.jquery.com/postreceive-hook, then click "Update Settings" to save.

Finally, add a version to the code, push to GitHub, and your plugin will be added to the jquery official plugin library.

git tag 0.1.0git push Origin--tags

Later, you want to publish a new version, just make a new tag.

jquery Plugin Development