간단한 jquery 플러그인 내에서 함수를 호출 할 수 없습니다.

Question

간단한 jquery 플러그인 내에서 함수를 호출하려고합니다. init 메소드가 너비에 30을 더하지만 add50 메소드는 오류 Uncaught TypeError: Object [object Object] has no method 'add50'을 던졌습니다. 이 오류의 원인을 확인하지 못합니다.

jsfiddle : http://jsfiddle.net/nsshrinivasan/KnDMq/6/

;(function ($, window, document, undefined) { 

    // Create the defaults once 
    var pluginName = 'Extender', 
     defaults = { 
      propertyName: "value" 
     }; 

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 
     this.options = $.extend({}, defaults, options) ; 
     this._defaults = defaults; 
     this._name = pluginName; 
     this.init(this.element); 
    } 

    Plugin.prototype = { 
     init : function (element) { 
      // console.log($(this.element).width()); 
      $(element).width($(element).width() + 30); 
     }, 
     add50 : function(element){ 
      $(element).width($(element).width() + 50); 
     } 

    }; 

    $.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 

})(jQuery, window, document); 

$('#metal').Extender().add50();  

HTML :

<div id='metal'></div> 

CSS :이 같은

#metal{ 
    width: 50px; 
    height: 10px; 
    background:red; 
} 

Answer 1

를 추가해보십시오 뭔가 :

function Plugin(element, options) { 
    this.element = element; 
    this.options = $.extend({}, defaults, options) ; 
    this._defaults = defaults; 
    this._name = pluginName; 
    if (this[options]){ 
     this[options](this.element); 
    } else { 
     this.init(this.element); 
    } 
} 

그러면 모든 플러그인을 다음과 같이 만들 수 있습니다 : $('#metal').Extender('add50'); 옵션으로 메소드를 전달하십시오. 나는 당신의 바이올린을 업데이트 jsFiddle Update

Answer 2

:

;(function ($, window, document, undefined) { 

    // Create the defaults once 
    var pluginName = 'Extender', 
     defaults = { 
      propertyName: "value" 
     }; 

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 
     this.options = $.extend({}, defaults, options) ; 
     this._defaults = defaults; 
     this._name = pluginName; 
     this.init(); 
    } 

    Plugin.prototype = { 
     init : function() { 
      // console.log($(this.element).width()); 
      $(this.element).width($(this.element).width() + 30); 
     }, 
     add50 : function(){ 
      $(this.element).width($(this.element).width() + 50); 
     } 

    }; 

    $.fn[pluginName] = function (options) { 
     return $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
    } 

})(jQuery, window, document); 

$('#metal').Extender().add50();