jquery Plugin Development

Turn from: JavaScript standard reference Tutorial (Alpha), by Nguyen

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.

function () {  // do your awesome plugin stuffhere};

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  ($) {  function  () {    // do your awesome plugin stuff here  };}) (jQuery);

The preceding code is preceded by a semicolon, which is to prevent multiple script files from merging when the end statement of the other script does not add a semicolon, 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) {  function() {    // do Your awesome plugin stuffhere  };} (JQuery, window));

It is important to note that within 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  ($) {  function  () {    var max = 0;     // The following this, which refers to a jquery object instance    the. each (function() {        //  callback function inside, this refers to the DOM object        max = Math.max (max, $ (this). Height ());    });     return max;  };}) (jQuery);

The function of the MaxHeight plugin above 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  ($) {  function  () {    this. css ("Color", "Green");     returnthis;  };}) (jQuery); $ ("a"). Greenify (). addclass ("greenified");

The above code returns the This object, 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.

function () {    returnthis. each (function() {        //  Process each object     });};

The plug-in can accept a Property object parameter.

(function  ($) {  function  (options) {    var settings = $.extend ({      ' location '         : ' Top ',      ' background-color ': ' Blue '    }, Options);     return this. each (function  () {      //  fill in the plug-in code     });}  ;}) (jQuery);

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

Instance

The following is a plug-in that adds an href attribute of element A to a Web page.

(function($) {    function() {        returnthis. Filter (' a ') . Append (function() {            returnthis. href + ') ';}        );}    ;} (JQuery)); // use $ (' a '). Showlinklocation ();

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

Release of Plugins

After you write the plugin, you can publish it to the official jquery website.

First, write a plugin for the 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, fill in the URL http://plugins.jquery.com/postreceive-hook, and 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.0--tags

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

jquery Plugin Development