Question

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?

Answer 1

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?