[Js/jquery]jquery Plugin Development

Summary

The previous article simply learned the JS self-invocation method. Learn how to write a jquery plugin when you are on the strike today.

Jquery

Reference Address: http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html

Add a new function through Jquery.fn to write a jquery plugin, or you can extend a new method on the jquery object.

Code snippet:

        function () {            //code ...        };

It seems that way, but there is a problem, perhaps your extension of the method will conflict with the method in jquery, so it is best to use a self-executing function to wrap it up, and jquery as a parameter to pass in. So with the following code:

    (function  ($) {        function  () {            //code ...         };    }) (jQuery);

In this way, because of the closure of the relationship, so and other places do not create conflict.

A simple plugin

Gets the maximum width of the div on the page

<script>    (function($) {$.fn.maxwidth=function () {            varMax = 0; //this points to a jquery object             This. each (function () {                //this points to the DOM element, which is to be taken to this DOM element, which can be passed by $ (this)max = Math.max (max, $ ( This). width ());            }); returnMax;    };    }) (JQuery); varMaxWidth = $ ("div"). MaxWidth (); Console.log (maxWidth);</script>

Chain type

In order to use the features of chained development in jquery, it is necessary to return this element for the next use on the chain when encapsulating the plug-in.

(function($) {$.fn. Chain=function(type) {//this points to a jquery object            return  This. each (function () {                var$ This= $( This); if(type && Type = = "width") {                    $ This. Width ($ This. Width ());        }            });    };    }) (JQuery); $("Div"). Chain ("width"). CSS ("Color", "red");

Because the plugin returns this, you can continue chaining, such as CSS (). If your plugin is not returning a simple value, you should usually return this.

Default value Options

In the process of using plug-ins, you can often see that the plug-in has partial default values, we just need to pass in the parameters needed to replace, you can configure the plug-in.

(function($) {$.fn.myalert=function(options) {varSettings = {                "Location": "Top",                "Background-color": "Red"            }; Console.log (' Default ', settings); return  This. each (function () {                if(options) {$.extend (settings, options); Console.log (' Extend ', settings);            };        });    };    }) (JQuery); $("Div"). Myalert ({"Location": "Center"});

Results

In this example, when the plugin is used, the default location is replaced with the center, and the background-color remains intact. This ensures a highly configurable wake-up without the need for a developer to define all possible options.

Name space

The importance of namespaces ensures that your plug-ins are not rewritten by other plugins, and can be avoided by other code on the page.

Attention

Under no circumstances is it oppressive to add multiple methods to a JQUERY.FN in a plug-in.

(function  ($) {    function  () {    };     function  () {    };    ..     function  () {    };}) (jQuery);

You can do this by placing the method inside an object and then invoking it according to the different parameters:

(function ($) {        varMethods ={method1:function(Options) {}, Method2:function () { },        }; $.fn.mymethod=function(method) {if(Methods[method]) {returnMethods[method].apply ( This, Array.prototype.slice.call (arguments, 1)); } Else {                //....}} ) (jQuery);

[Js/jquery]jquery Plugin Development