Override jQuery plugin function like in jQuery UI

Question

I know this question has gone round a couple of times now but the answers don't seem to be exactly what I am looking for. Say I have a plugin called "jdropdown" that looks like:

(function($){
    var options = {},
    methods = {},
    renderItem = function(){},

    $.fn.jdropdown = function(method){
        // plugin method despatcher
    });
 })(jQuery);

Now when declaring the plugin I want to allow the user to override the renderItem function in the plugin. I have noticed that jQuery UI gets around this by allowing item access through the data attribute (as can be seem in this example: http://jqueryui.com/demos/autocomplete/#custom-data) but whenever I try and make something like this myself I come to a dead end. I have read the "Data" section of: http://docs.jquery.com/Plugins/Authoring to no avail (They don't really describe how stuff works that well, they just write a lot of 'FTW' and state why it is useful).

Is there anyone who can show me how to use the data attribute of my element (plugin anchor) to access the plugins methods to override them like so:

$('.someThing').jdropdown().data('jdropdown').renderItem = function(){}

Thanks,

Moesio · Accepted Answer · 2015-07-01 11:40:32Z

3

Create a closure and save original plugin to future reuse;
Recreate the plugin with the same name;

Do all what you want and call original plugin.

(function(){
    var originalPlugin = $.fn.pluginname;

    $.fn.pluginname = function(options) {

        var defaults = {
            someOption: 'string',
            anotherOption: { /* some object, if you need it ... */ }
        }

        var options = $.extend(defaults, options);
        var $this = $(this);
        $this.css('background-color', 'red'); // for example

        /* do something with '$this' applying any jquery */

        originalPlugin.apply(this, arguments);
    }
})();

answered Jul 1, 2015 at 11:40

Moesio

3,1861 gold badge29 silver badges36 bronze badges

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

1 Comment

Sammaye Over a year ago

Nice way to create defaults for plugins etc

Naftali · Accepted Answer · 2011-11-28 14:43:20Z

2

Pass it as an option.

(function($){
    var options = {
       renderItem: function(){}
    };

    $.fn.jdropdown = function(method){
        $.extend(options, method);
        // plugin method despatcher
    };
 })(jQuery);

Then to use it:

$('.someThing').jdropdown({
    renderItem: function(){
        //something....
    }
});

Simple example: http://jsfiddle.net/maniator/GxGz9/

answered Nov 28, 2011 at 14:43

Naftali

147k41 gold badges247 silver badges304 bronze badges

4 Comments

Sammaye Over a year ago

Oh yea that actually looks like a better option. Gonna try that but leave the question open a bit longer to see if I get other replies, thanks :)

Naftali Over a year ago

@Sammaye I put up a fiddle as well ^_^ see there

Sammaye Over a year ago

Yea that was an awesome way worked perfect, decided to go with it thanks again :)

Naftali Over a year ago

@Sammaye No problem ^_^ happy to help

Collectives™ on Stack Overflow

Override jQuery plugin function like in jQuery UI

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related