Question

I’m building a Jquery Plugin. My skeleton code is as below:

(function (window, document, $, undefined) {

    var methods = {
        init : function(options){
        },
        func_1: function(){
        },
        func_2: function(){
        }
    };

    $.fn.myplugin = function(args){

        if ( methods[args] )
        {
            return methods[ args ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        }
        else if ( typeof args === 'object' || ! args ) 
        {
            var opts = $.extend({}, $.fn.myplugin.defaults, args);
            var new_args = new Array(opts);
            return methods.init.apply( this, new_args );
        }
        else 
        {
            $.error( 'Method ' +  args + ' does not exist' );
        }
    };

    $.fn.myplugin.defaults = {
         func_1: function(){},
         func_2: function(){}
    };

}(window, document, jQuery));

I’m looking to extend this plugin so that I may add additional functions to JQuery. So, I want to have these functions called as below:

$.myplugin.new_func();

How do I do this? I know I probably have to use $.extend but not sure how to go about it.

Thanks in advance.

Answer 1

Ok, after going through some older JQuery plugins (FancyBox 2 especially), I managed to figure out a way to do this. Below is the entire skeleton code:

(function (window, document, $, undefined) {

    var methods = {
        init : function(options){
        },
        func_1: function(){
        },
        func_2: function(){
        }
    };

    $.fn.myplugin = function(args){

        if ( methods[args] )
        {
            return methods[ args ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        }
        else if ( typeof args === 'object' || ! args ) 
        {
            var opts = $.extend({}, $.fn.myplugin.defaults, args);
            var new_args = new Array(opts);
            return methods.init.apply( this, new_args );
        }
        else 
        {
            $.error( 'Method ' +  args + ' does not exist' );
        }
    };

    $.fn.myplugin.defaults = {
        func_1:     function(){},
        func_2:     function(){}
    };

    //below is the code I added to get the desired functionality
    var D = $.myplugin = function(){};
    $.extend(D, {
        new_func: function(){
            //add functionality here
        }
    });

}(window, document, jQuery));

It is also possible to define a function (called new_func or whatever) inside methods object, and then call it down below from your new function using methods.new_func().

Cheers.