学会自己封装JQuery插件

今天简单说说JQuery插件的封装。

• 首先上一份简单的模板

//传进来参数有window和document，如果插件用不上，可以不写。目的是为了快速查找window和document。
;(function($,window,document){
    //设置插件的名字
    var pluginName = "defaultPluginName";
    //默认参数配置项
    var defaults = {
        propertyName : "value"
    }
    //插件类的构造方法
    function Plugin(element,options){
        //拿到dom元素，获得对应jq对象，要$(element)
        this.element = element;
        //覆盖默认配置项
        this.options = $.extend({},defaults,options);
        //缓存配置项
        this._defaults = defaults;
        //缓存插件名字（并没神马用）
        this._name = pluginName;
        //调用初始函数
        this.init();
    }
    // 插件初始化函数
    Plugin.prototype.init = function(){
        //做你想做的事情
    }
    // 也可以这样 能定义更多函数
    Plugin.prototype = {
        init: function () { 
            this.fun*();  // 这样可以用来调用其他函数
        }
        fun1: function() { }
        fun2: function() { }
        .....
    }
    //fn就是prototype
    $.fn[pluginName] = function(options){
        //each表示对多个元素调用，用return 是为了返回this，进行链式调用
        return this.each(function(){
            if(!$.data(this,'plugin_'+pluginName)){
                //生成插件类实例。
                $.data(this,'plugin_'+pluginName,new Plugin(this,options));
            }
        });
    }
})(jQuery,window,document);

插件封装中，需要注意的是this的使用。不多说。通过上面的模板便能很轻松的封装自己的插件啦~~~

• 然后上一份这是我自己写的轮播图插件

使用方式 很简单的

将轮播图当做背景图，可以继续在轮播图上添加需要的内容。提供两种轮播效果，淡入淡出和左右滑动，默认参数在插件中可以看到

var defaults = {
        Type: 'default',    // fade淡入淡出|default左右滚动
        ShowPrevNext: true, // 是否显示下一个上一个
        ShowBtn: true,      // 是否显示切换圆按钮
        BtnAlign: 'center', // 切换按钮位置 left|center|right
        AutoPlay: true,     // 是否自动滚动
        TimeOut: 5          // 自动滚动间隔时间
    }

可以调用时通过以下方式自定义参数

$('#myDiv').SliderImg({
    Type: 'fade'
});

通过data方法获取到轮播插件对象，便可以通过该对象调用内部方法。如下

$('#myDiv').data('myDiv_SliderImg').ToggleImg(2);

调用ToggleImg()方法切换到第三张图。

该轮播插件使用方式就这样，插件如何封装就根据模板和这份插件便可以学会，很简单的。