2012-10-27 101 views
-1

我正在重寫一個插件,使每個主要部分變成methodas per this questionthe jQuery documentation,到目前爲止整個事情仍然有效。自定義jQuery插件,但無法找出自定義方法

該插件與初始化:

$('#mySelector').myPlugin({ 
    // want to keep initial options 
    option1: true, 
    option2: 'right' 
    // etc. 
}); 

後來的後來,我想用一個refresh方法:

$('#mySelector').myPlugin('refresh'); 

基本上,我需要 「刷新」,在這個插件做的一切,除了重新應用HTML DOM修改(同時保留所有原始初始化選項)。

我似乎無法弄清楚。我不能僅僅使用methods.binders(var1, var2);,因爲我也需要獲取變量。但是,init()在第一次初始化時需要methods.html()。當我做我的refresh時,如何跳過那一部分?

也許這很簡單,但我現在頭痛。

(function ($) { 

    var methods = { 
     defaults : { 
      option1: false, 
      option2: 'left' 
        // etc. 
     }, 
     settings : {}, 
     init : function(options) { 
      methods.settings = $.extend({}, methods.defaults, options); 

      $(this).each(function() { 
       if ($(this).is('[type=radio]')) { 
        var var1 = $(this); 
        var var2 = $('.somethingelse'); 
        // etc. 
        methods.html(var1, var2); 
        methods.binders(var1, var2); 
       }; 
      }); 

     }, 
     refresh : function() { 
      // no idea?? 
     }, 
     html : function(var1, var2) { 
      // various HTML DOM manipulations 
     }, 
     binders : function(var1, var2) { 
      // binding various events, hover, click, etc. 
      // assigns classes 
     } 
    }; 

    $.fn.myPlugin = function(method) { 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.myPlugin'); 
     } 
    }; 

})(jQuery); 

回答

1

繼移動的大部分代碼從methods.init的功能doInit()可以在兩個methods.initmethods.refresh與論據initType和條件內被調用來調用一些代碼init但不refresh

(function($) {  

    var methods = {  
     /* see answer edit about moving this out of here*/   
     defaults: { 
      option1: false, 
      option2: 'left' 
      // etc. 
     }, 
     settings: {}, 
     init: function(options) { 
      /* see answer edit about moving this out of here*/ 
      methods.settings = $.extend({}, methods.defaults, options); 
      doInit(this, 'init', methods); 

     }, 
     refresh: function() { 
      doInit(this, 'refresh', methods); 
     }, 
     html: function(var1, var2) { 
      // various HTML DOM manipulations 
     }, 
     binders: function(var1, var2) { 
      // binding various events, hover, click, etc. 
      // assigns classes 
     } 
    }; 

    function doInit(el, initType, methods) { 
     $(el).each(function() { 
      if ($(this).is('[type=radio]')) { 
       var var1 = $(this); 
       var var2 = $('.somethingelse'); 
       // etc. 
       methods.html(var1, var2); 
       if (initType == 'init') { 
        methods.binders(var1, var2); 
       } 
      }; 
     }); 
    } 

    $.fn.myPlugin = function(method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.myPlugin'); 
     } 
    }; 

})(jQuery); 

可能不是缺陷,但想法應該讓你去

編輯:實現我忘了做設置更全球化。一種方法是從methods刪除默認值及創建

var defaults={ /* ..... */}; 
$.fn.myPlugin.defaults=$.extend({},defaults, options); 

現在,您可以訪問用戶定義的設置,當你做了刷新。另一個非常有用的補充是將設置存儲在jQuery DOM數據中,如:

+0

謝謝。我要恢復一兩天,仔細看看這個。同時+1。 – Sparky