jquery，修改插件的选项

Question

我试图改变插件的选项，在飞行中。但我无法找到如何完成。虽然，我很积极，我以前看到过它。

这里有一个简单的插件与1个选项：即自动载入的页面，

<a href="javascript:void(0)" onclick="change_the_option(40)">click me</a> 

    $(document).ready(function() { 

     $(#menu).animateMenu({ 
      padding:20 
     }) 

    }); 

function change_the_option(valchange){ 

//somehow modify the option here, I'm guessing 

} 

。但是，我可能希望动态更改填充选项，而无需重新加载整个页面。

基本上，如果有人点击一个链接或我选择的任何选择器，我想改变填充：20填充：40，或其他。

有没有人有修改插件选项，在飞行中的经验？

Answer 1

如果您还没有准备好，看看

http://docs.jquery.com/Plugins/Authoring

从上往下到底“默认和Option”。理想情况下，你会希望能够调用你的插件传递一些参数来做你想做的事情。例如：

$("#menu").animateMenu("padding","20") 

或

$("#menu").animateMenu("update",{padding:20}) 

取决于你到底如何想它的工作，但它应该返回jQuery对象，使其CA正确链接。这一点在上面的链接中都有解释。

但这种方式，你可以有干净的代码，你可以与其他的jQuery，像这样沿着链条：

$("#menu").animateMenu(); // initialize the menu 

// ... do other stuff 

$("#menu").animateMenu("update",{padding:20}).css("color","red"); 

// ... etc. 

Answer 2

为此，插件必须返回对其内部类的引用。所以，你可以存储并在以后调用它，如：

$(document).ready(function() { 
    var animateMenu = $('#menu').animateMenu({ 
     padding:20 
    }) 
}); 

及更高版本：

animateMenu.add(something);或animateMenu.setOptions({ padding: 30 });（或其他）。

但是这打破了jQuery的可链接性，所以你必须决定什么对你更好。另一种选择是，包括一些参数讲述回国与否，像jQuery工具做，如：

$(document).ready(function() { 
    var animateMenu = $('#menu').animateMenu({ 
     api:true 
    }) 
}); 

我做了我的第一个插件jQuery的分析工具标签的代码，也许它可以帮助你。 http://flowplayer.org/tools/tabs/index.html

PS：大多数选择器必须被引用，请检查您的代码。

Answer 3

这个问题困扰了我一段时间，这是工作的一个我找到了。适用于我。英语不是我的第一语言，所以如果我没有清楚解释，请原谅我。

这是我之前为切换开关创建的一个插件。

在init方法中，我将插件选项保存到jQuery.data()，然后稍后我可以用新选项调用simpleSwitchUpdate函数。如您所见，我检索为元素保存的旧选项，并致电$.extend撰写新选项，并拨打$.fn.simpleSwitch和newOptions。我一直在使用这种模式创建可更新的插件一段时间，它对我来说工作得很好。

/** 
* A plugin for switch 
*/ 

(function($) { 

    var Switch = { 

     init : function(options, elm) { 
      var self = this; 
      self.$elm = $(elm); 

      self.$elm.empty(); 
      self.options = $.extend({}, $.fn.simpleSwitch.options, options); 

      self.$elm.data("switchData", self.options); 
      self.$elm.append(self.createSwitch()); 

     }, 

     createSwitch : function() { 

      //logic to create your plugin 
     } 
    }; 

    $.fn.simpleSwitch = function(options) { 
     return this.each(function() { 
      var simpleSwitch = Object.create(Switch); 
      simpleSwitch.init(options, this); 
     }); 
    }; 

    $.fn.simpleSwitchUpdate = function(options) { 
     var switchData = this.data("switchData"); 
     var newOptions; 
     if (switchData) { 
      newOptions = $.extend({}, switchData, options); 
     } else { 
      newOptions = $.extend({}, $.fn.simpleSwitch.options, options); 
     } 

     return this.simpleSwitch(newOptions); 
    }; 

    $.fn.simpleSwitch.options = { 
     width : 25, 
     height : 15, 
     on : true, 
     onDirection : "right", 
     easing : "easeOutQuint", 
     roundBorder : true, 
     onColor : "orange", 
     offColor : "lightgray", 
     onToggle : null 
    }; 

})(jQuery); 

JSFIDDLE LINK