JQuery plugin - update settings after initialization

Question

I have a jQuery plugin and I want to be able to change the parameters on the fly, like this example: $('.element').pwstabs('options','effect',scale) or something similar to it. I tried to add update: function , tried to add Plugin.prototype.update , but still can't figure out how to do this :)

Here is the plugin structure:

  ;(function ($, window, document, undefined) { var pluginName = "pwstabs", defaults = { effect: 'scaleout', defaultTab: 1, containerWidth: '100%', tabsPosition: 'horizontal', horizontalPosition: 'top', verticalPosition: 'left', responsive: false, theme: '', rtl: false, controlls: false, next: '', prev: '', first: '', last: '', auto: false, play: '', pause: '' }; function Plugin(element, options) { this.element = $(element); this.$elem = $(this.element); this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype = { init: function(){ // Here the code for the plugin } }; $.fn[pluginName] = function ( options ) { return this.each(function () { new Plugin( this, options ); }); }; })(jQuery, window, document); 

So now I use the plugin as:

 $('.element').pwstabs({ effect: 'scalein', defaultTab: 2 }); 

And when I click the button, I want to change the effect to say scaleout . With type code:

 $('.button').click(function(){ $('.element').pwstabs('options','effect','scalein'); }); 

So how do I implement this in a plugin?

Answer 1

Currently, the only supported call pattern in this plugin is to send an object literal containing settings to overwrite the default values. For instance:.

 $('.element').pwstabs({ effect: 'scalein', defaultTab: 2 }); 

This call pattern is defined as follows:

 $.fn[pluginName] = function ( options ) { return this.each(function () { new Plugin( this, options ); }); }; 

As you can see, the parameter dictionary is sent as the only parameter of the constructor function Plugin () to create the plugin and initialize it.

In order to support the call pattern that you need, you will have to modify this method to support call patterns and (initialization using the object literal, but also call any method with a lot of parameters, for example, setting your method parameters).

Here is an improved function that will handle both call patterns. In addition, it will also save the plugin instance on the element, so you can access existing settings, etc. On subsequent calls (for example, changing settings) on the same element.

 $.fn[pluginName] = function (options) { // get the arguments var args = $.makeArray(arguments), after = args.slice(1); return this.each(function () { // check if there is an existing instance related to element var instance = $.data(this, pluginName); if (instance) { if (instance[options]) { instance[options].apply(instance, after); } else { $.error('Method ' + options + ' does not exist on Plugin'); } } else { // create the plugin var plugin = new Plugin(this, options); // Store the plugin instance on the element $.data(this, pluginName, plugin); return plugin; } }); } 

This will allow you to call the plugin on request:

 $('.element').pwstabs('options','effect','slidedown'); 

However, this means that you have the "options" method in the Plugin prototype, so be sure to add it:

 Plugin.prototype = { options: function (option, val) { this.settings[option] = val; }, // Constructing Tabs Plugin init: function () { // omitted code for brevity } } 

As you can see, parameter parameters simply set a new option in an existing instance. Very simple and efficient. The new parameter will be selected by the tag handler and voila!

Here is a jsFiddle example with sample code if you are having problems implementing what I have described so far:

http://jsfiddle.net/7whs3u1n/6/

Update . I significantly improved my answer to get rid of unnecessary things, included more detailed information and a full implementation that works (check the script above);) I hope this answers your question!

Adding state to your plugin was not easy, but when you have free time, check out an alternative mechanism for writing plugins with state jQuery with state called jQuery widget factory :

http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

In the future, you might consider rewriting your plugin to use the factory widget. This will undoubtedly make your code simpler;)

Answer 2

Try this template.

 (function ($) { var defaults = { "text": "abcdefg", } , options = $.extend({}, defaults, options); $.fn.plugin = function (options) { var options = (function (opts, def) { var _opts = {}; if (typeof opts[0] !== "object") { _opts[opts[0]] = opts[1]; }; return opts.length === 0 ? def : typeof opts[0] === "object" ? opts[0] : _opts }([].slice.call(arguments), defaults)); return $(this).text(options.text) } }(jQuery)); $(".results:eq(0)").plugin(); // return `defaults` $(".results:eq(1)").plugin({"text":"gfedcba"}); // return `options` $(".results:eq(2)").plugin("text", 123); // return `arguments` as `options` 

  (function ($) { var defaults = { "text": "abcdefg", } , options = $.extend({}, defaults, options); $.fn.plugin = function (options) { var options = (function (opts, def) { var _opts = {}; if (typeof opts[0] !== "object") { _opts[opts[0]] = opts[1]; }; return opts.length === 0 ? def : typeof opts[0] === "object" ? opts[0] : _opts }([].slice.call(arguments), defaults)); return $(this).text(options.text) } }(jQuery)); $(".results:eq(0)").plugin(); // return `defaults` $(".results:eq(1)").plugin({"text":"gfedcba"}); // return `options` $(".results:eq(2)").plugin("text", 123); // return `arguments` as `options` 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="results"></div><br /> <div class="results"></div><br /> <div class="results"></div>