基于Jquery、JqueryUI插件编写

刚开始编写jquery插件的时候，只是从网上找个模板看着写，并不理解.刚刚仔细把官网的API看了下，突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又.

How to create a Jquery Plugin主要看的大体介绍，然后创建Basic Plugin 和  Advanced Plugin

Basic

1.这应该是最简单的一种，定义和调用

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this; // chain use
}
 
$( "a" ).greenify().addClass( "greenified" );

2.proteting the $ Alias and Adding Scope(包起来防止$标识冲突)

(function ( $ ) {
 
    $.fn.greenify = function() {
        this.css( "color", "green" );
        return this;
    };

}( jQuery ));

3.Using the each() Method

调用插件方法时可能有多个Element

$.fn.myNewPlugin = function() {
 
    return this.each(function() {
        // Do something to each element here.
    });
 
};

Advanced

// Plugin definition.
$.fn.hilight = function( options ) {
 
    // Extend our default options with those provided.
    // Note that the first argument to extend is an empty
    // object – this is to keep from overriding our "defaults" object.
    var opts = $.extend( {}, $.fn.hilight.defaults, options );
 
    // Our plugin implementation code goes here.
 
};
 
// Plugin defaults – added as a property on our plugin function.
$.fn.hilight.defaults = {
    foreground: "red",
    background: "yellow"
};

调用的时候有两种方式改变参数

// Override plugin default foreground color.
$.fn.hilight.defaults.foreground = "blue";
 
// ...
 
// 方式1.Invoke plugin using new defaults.
$( ".hilightDiv" ).hilight();
 
// ...
 
// 方式2.Override default by passing options to plugin method.
$( "#green" ).hilight({
    foreground: "green"
});