jquery access plugin as variable

Question

This should be an easy one for you. I made a plugin a while ago and have forgotten how to set the plugin to a variable and then use it. I think my code might help you understand what i'm talking about.

var $bgcolourpicker1 = $('div.bgcolour1').bpcolourpicker(
    {
        returncolour: bgcolour1,
        cssposition: 'relative'
    });

So the control has been established but at any given time I might want to re-set a property like so.

$('div.bgcolour2').bpcolourpicker({ returncolour: bgcolour1 });

That works but i'm sure it can be done by using the variable $bgcolourpicker1 so for instance.

$bgcolourpicker1.bpcolourpicker({ returncolour: bgcolour1 });

Does anyone know if that can be done? I'm sure i've seen it done before.

Thanks

Answer 1

I believe the common design for this case would somewhat look like this:

var $bgcolourpicker1 = $('div.bgcolour1').bpcolourpicker({
    returncolour: bgcolour1,
    cssposition: 'relative'
});

$bgcolourpicker1.bpcolourpicker('updateSettings', { returncolour: bgcolour2 });

You'd then probably save the instance of the plugin using data with the jQuery object (in this case $('div.bgcolour1') and if the first argument is passed into the function is a String rather than an object you'd execute it using the already existing instance.

In your case you might be able to even skip the method and just check if the plugin has already been called on this object:

$.fn.bpcolourpicker = function(settings) {
    return $(this).each(function(i, e) {
        if ($(e).data('bpcolourpicker'))
            // … use the one you have already
        else
            // … regular plugin execution
    }
};