jQuery插件 – 初始化后更新设置
我有一个jQuery插件，我希望能够动态更改选项，例如： $('.element').pwstabs('options','effect',scale)或类似的东西。 我尝试添加update: function ，尝试添加Plugin.prototype.update ，但仍然无法弄清楚如何做到这一点:)
这是插件的结构：
;(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's the code for the plugin } }; $.fn[pluginName] = function ( options ) { return this.each(function () { new Plugin( this, options ); }); }; })(jQuery, window, document);
所以现在我使用插件，如：
$('.element').pwstabs({ effect: 'scalein', defaultTab: 2 });
当我点击一个按钮，我想改变效果让我们说scaleout 。 使用以下代码：
$('.button').click(function(){ $('.element').pwstabs('options','effect','scalein'); });
那么如何在插件中实现这一点呢？
目前，该插件中唯一受支持的调用模式是发送包含覆盖默认值的设置的对象文字。 例如：
$('.element').pwstabs({ effect: 'scalein', defaultTab: 2 });
该调用模式在以下方法中定义：
$.fn[pluginName] = function ( options ) { return this.each(function () { new Plugin( this, options ); }); };
如您所见，选项字典作为唯一参数发送到构造函数Plugin（）以构建插件并初始化它。
要支持您需要的调用模式，您必须修改此方法以支持两种调用模式（使用对象文字初始化，但也调用具有更多参数的任何方法，如选项设置方法）。
这是一个改进的函数，它将处理两种调用模式。 此外，它还会在元素上存储插件的实例，因此您可以在同一元素的后续调用（例如，设置更改）中访问现有设置等。
$.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; } }); }
这将允许您按要求调用插件：
$('.element').pwstabs('options','effect','slidedown');
但是，这意味着你在Plugin原型中有一个’options’方法，所以一定要添加一个：
Plugin.prototype = { options: function (option, val) { this.settings[option] = val; }, // Constructing Tabs Plugin init: function () { // omitted code for brevity } }
如您所见，选项设置只是在现有实例上设置新选项。 非常简单高效。 新设置将由click方法处理程序拾取并瞧！
这是一个带有示例代码的jsFiddle，以防您在实现我到目前为止描述的内容时遇到问题：
http://jsfiddle.net/7whs3u1n/6/
更新 ：我已经大大改进了我的答案，以摆脱不必要的东西，包括更多的细节和一个有效的完整实现（检查上面的小提琴）;）我希望这回答你的问题！
为插件添加有状态并不难，但是当你有空闲时间时还要检查编写有状态jQuery有状态插件的替代机制，称为jQuery widget factory ：
http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/
在将来，您可以考虑重写您的插件以使用小部件工厂。 它肯定会使你的代码更简单;）
尝试这种模式
(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`