CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
Sammaye
Sammaye

Reputation: 43884

Override jQuery plugin function like in jQuery UI

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,

Upvotes: 1

Views: 2538

Answers (2)

Moesio
Moesio

Reputation: 3178

  • 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);
    }
})();

Upvotes: 3

Naftali
Naftali

Reputation: 146302

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/

Upvotes: 2

Related Questions