Question

I’m writing a jquery plugin using the following pattern (because I don’t want to do $(“#element”).myPlugin(), I’m not doing anything to a particular element.. anyway..

$.extend({
    myPlugin: function(){
        //some cool stuff
    }
});

But I also need a way for other plugins to change my plugins behavior, I tried doing the following, and got a weird error…

$.extend({
    myPluginStyles: {
        someStuff: {},
        moreStuff: {},
    }
});

$.extend({
    myPlugin: function(options) {
        this.style = $.myPluginStyles[options.style]; //options.style will contain either "someStuff" or "moreStuf"
    }
})

Now, other plugins can add new “styles” in the myPluginStyles object..at least that’s the idea:

$.myPluginStyles.newStyle = {};

now you can do $.myPlugin({style: ‘newStyle’});

but I’m getting the following error:

Uncaught TypeError: Property 'style' of object function (e,t){return new v.fn.init(e,t,n)} is not a function 

Thanks in advance.

Answer 1

Perhaps this is what you are looking for? This way, the plugin has an object ‘styles’, to which stuff can be registered (using registerStyles) and used (using this.styles[name]).

$.fn.extend({
    myPlugin: {
        styles : {}, //define the style object
        registerStyles : function(name, style) {
            //register name and style in the plugin's styles object
            this.styles[name] = style;
        },
        doStuff: function(name){
            //test by alerting the first value in the styles object
            alert(this.styles[name])
        }
    }
});

Usage:

$.fn.myPlugin.registerStyles('myStyle', 'test'); //set style

$('#my_element').myPlugin.doStuff('myStyle'); //do stuff (in this case echo-ing the style)

// or $.fn.myPlugin.doStuff('myStyle'); if you your function is not designed to use an element

I don’t know if this is best practice, but it is how I’d do it.

See this fiddle for a demo