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