I have written a small jQuery plugin with the following structure:

(function($) {
   // Private vars

   // Default settings
   $.PLUGINNAME = {
         id: 'PLUGINNAME',
         version: '1.0',
         defaults: {
              min: 0,
              max: 10
         }
   };

   // extend jQuery
   $.fn.extend({

       PLUGINNAME: function(_settings) {

           init = function() {

           }

           prepare = function() {

           }

           ...

           return this.each(function() {
                 _this = this;
                 init();
           });

       }

   });

})(jQuery);

I am calling this as follows:

$("#update-panel").PLUGINNAME({
                min: 1,
                max: 20  
          });

I am trying to provide an additional public method where some data inside the function can be updated after the above function call to the plugin and am not sure how to go about doing this. What I am looking for is something like this:

_PluginInstance = $("#update-panel").PLUGINNAME({
                    min: 1,
                    max: 20  
                   });
...
...
_PluginInstance.setMin(2); //should change the minimum to 2

setMin will probably use some of the plugin's internal variables so I am not understanding how to do this. I know I am not returning an instance of the plugin to do the above but can someone please tell me how to go about doing this by keeping the same plugin structure?

I have written a small jQuery plugin with the following structure:

(function($) {
   // Private vars

   // Default settings
   $.PLUGINNAME = {
         id: 'PLUGINNAME',
         version: '1.0',
         defaults: {
              min: 0,
              max: 10
         }
   };

   // extend jQuery
   $.fn.extend({

       PLUGINNAME: function(_settings) {

           init = function() {

           }

           prepare = function() {

           }

           ...

           return this.each(function() {
                 _this = this;
                 init();
           });

       }

   });

})(jQuery);

I am calling this as follows:

$("#update-panel").PLUGINNAME({
                min: 1,
                max: 20  
          });

I am trying to provide an additional public method where some data inside the function can be updated after the above function call to the plugin and am not sure how to go about doing this. What I am looking for is something like this:

_PluginInstance = $("#update-panel").PLUGINNAME({
                    min: 1,
                    max: 20  
                   });
...
...
_PluginInstance.setMin(2); //should change the minimum to 2

setMin will probably use some of the plugin's internal variables so I am not understanding how to do this. I know I am not returning an instance of the plugin to do the above but can someone please tell me how to go about doing this by keeping the same plugin structure?

• javascript
• jquery
• closures

Share Improve this question Follow edited Aug 21, 2011 at 3:27 Legend asked Aug 21, 2011 at 3:21 LegendLegend 117k123123 gold badges284284 silver badges406406 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Just make the function a property of this within the PLUGINNAME object:

(function($) {
   $.PLUGINNAME = {
     // Default settings
   };

   // extend jQuery
   $.fn.extend({
       PLUGINNAME: function(_settings) {

           // private methods
           var init = function() {};
           var prepare = function() {};

           // public methods
           this.setMin = function ( val ) {
             _settings.min = val;
           };
           this.getMin = function () {
             return _settings.min;
           };

           return this.each(function() {
             _this = this;
             init();
           });
       }
   });
})(jQuery);

Then you could do:

_PluginInstance = $("#update-panel").PLUGINNAME({
                    min: 1,
                    max: 20  
                   });
_PluginInstance.getMin(); // 1
_PluginInstance.setMin(2);
_PluginInstance.getMin(); // 2

EDIT: Oh god I can't believe I forgot the var keywords, why didn't y'all tell me my fly was down?

You could use the jQuery-UI method calling style:

$("#update-panel").PLUGINNAME('method', arguments...);

And then in your plugin:

PLUGINNAME: function(_settings, args) {
    if(!$.isPlainObject(_settings)) {
        // _settings (should) be the method name so
        // do what needs to be done to execute the method.
        return;
    }
    // Proceed as before.

You might want to use the arguments pseudo-array instead of the extra args parameter. You can store extra things in $(this).data('PLUGINNAME') inside your PLUGINNAME function if you need to attach internal data to your individual objects.

Not a jQuery guy myself, and mu is too short's answer seems to be the right one. But I'd imagine you could also do like it says on jQuery's own docs and use the .data() method to store the min/max values.

In other words, make your code look for existing data on the elements, so the first time you call $('#update_panel').plugin({min:1, max:20}), it won't find any existing data, so it'll place those min/max values in an object and "save" them using .data().
Then, when you later call $('#update_panel').plugin({min:2}) your code finds the existing data, and updates the values.

Just an idea

You can define a variable just like you've defined a plugin.

$.fn.PLUGINNAME.someVariable = 4;

or if you prefer, just declare an empty variable outside the plugin and then add to it from inside the plugin

var someVariable;

(function($) {
   ... the plugin code
})(jQuery);