Custom jQuery plugin with methods and options

Question

I'm coding my own jQuery plugin, based on http://docs.jquery.com/Plugins/Authoring

(function($)
{
    var methods = 
    {
        publish : function(options) 
        {
            var settings = 
            {
                title : 'Publish'
            }
            var obj = $(this);
            var opt = $.extend(settings, options);
            return this.each(function() 
            {
                //some code here
            });
        }
    };

    $.modal = function(method) 
    {
        if (methods[method]) 
        {
          return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if(typeof method === 'object' || ! method) 
        {
          return methods.init.apply(this, arguments);
        } 
        else 
        {
          $.error('Method ' +  method + ' does not exist');
        }  
  };

})(jQuery);

Now the problem is if I don't use: $.fn.modal = function(method)... An error shows: Too much recursion. I want to use: $.modal so then I can call it like: $.modal(); How can I use a lot of methods with their own options and without element like $(element)?

Thanks

GitaarLAB · Accepted Answer · 2015-02-20 20:00:53Z

2

Solved using:

(function($)
{
    var methods = 
    {
        publish : function(options) 
        {
            var settings = 
            {
                title : 'Publish'
            }
            var opt = $.extend(settings, options);
            //some code here
        }
    };

    jQuery.extend(function(){
        modal : function(method) 
        {
            if (methods[method]) 
            {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } 
            else if(typeof method === 'object' || ! method) 
            {
              return methods.init.apply(this, arguments);
            } 
            else 
            {
              $.error('Method ' +  method + ' does not exist');
            }  
      };
    });

})(jQuery);

Now I can use: $.modal(method, options);

edited Feb 20, 2015 at 20:00

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

answered Nov 26, 2010 at 22:14

Clark

211 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Daff · Accepted Answer · 2010-11-26 04:02:28Z

0

What you are doing is not wrong, the problem is, that if you append directly to the jQuery object and not to jQuery.fn the this reference will point to the function executed and not the element of $(element) (if you are familiar with OOP think about it as static methods).

So when you use method.apply you are just passing the reference of $.method it changes the pointer of the this reference for the function you are calling. I assume that this is not what you want to do and that this leads to the recursion.

answered Nov 26, 2010 at 4:02

Daff

44.4k9 gold badges108 silver badges122 bronze badges

Collectives™ on Stack Overflow

Custom jQuery plugin with methods and options

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related