jQuery插件錯誤

Question

我試圖做一個插件（從其他代碼我有），但我只是不能得到選項的一部分工作d：

插件（到目前爲止）：

(function($){ 
    $.fn.scBox = function(options){ 
     var $opts = $.extend($.fn.scBox.defaults, options); 

     $.fn.scBox.defaults = { 
      start: 40, 
      //i: fn.scBox.defaults.start, 
      width: 200, 
      height: 50, 
      min: 0, 
      step: 10, 
      fontSize: 15, 
      textColor: "#fff", 
      bgColor: "#000", 
      slideColor: "#ff0000" 
     } 

     console.log($.fn.scBox.defaults); 
    } 
})(jQuery); 

當我試圖通過$.scBox();調用它，我得到這個錯誤：Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'scBox'我只想它登錄我給它D中的選項：

Answer 1

jQuery插件被稱爲jQuery的對象後調用。你不應該直接給他們打電話。你應該在jQuery對象上調用它。

$('#myElement').scBox(); 

而且，你在$.fn.scBox.defaults聲明之前致電$.extend。

$.fn.scBox.defaults = { 
     start: 40, 
     //i: fn.scBox.defaults.start, 
     width: 200, 
     height: 50, 
     min: 0, 
     step: 10, 
     fontSize: 15, 
     textColor: "#fff", 
     bgColor: "#000", 
     slideColor: "#ff0000" 
    } 

    var $opts = $.extend($.fn.scBox.defaults, options); 

注：$.extend修改作爲第一參數傳遞（它也返回它）的對象。所以，你不需要var $opts =：

$.extend($.fn.scBox.defaults, options); 
console.log($.fn.scBox.defaults); 

或者，你可以這樣做：

var $opts = $.extend({}, $.fn.scBox.defaults, options); 
console.log($opts); 

DEMO：http://jsfiddle.net/nfDTh/

Answer 2

呼叫$.fn.scBox()，不$.scBox()。這在fiddle中演示，其代碼粘貼在下面。

(function($){ 
    $.fn.scBox = function(options){ 
     $.fn.scBox.defaults = { 
      start: 40, 
      //i: fn.scBox.defaults.start, 
      width: 200, 
      height: 50, 
      min: 0, 
      step: 10, 
      fontSize: 15, 
      textColor: "#fff", 
      bgColor: "#000", 
      slideColor: "#ff0000" 
     } 
     var $opts = $.extend($.fn.scBox.defaults, options); 
     console.log($opts); 
    } 
    $.fn.scBox(); 
})(jQuery); 

Answer 3

$.fn.paginator = function(options){ 

      var defaults = { 
       items_per_page    : 10, 
       num_page_links_to_display : 4, 
       start_page     : 1, 
       total_items     : 20, 
       label_first     : 'First', 
       label_prev     : 'Prev', 
       label_next     : 'Next', 
       label_last     : 'Last', 
       show_first_last    : true, 
       onChange     : function(){return false;} 
      }; 
      var options = $.extend({}, $.fn.paginator.defaults, options); 

      return this.each(function(){ 
       //Code in here 
      }); 
}; 

這是我做了一個工作插件的某些部分。我希望它有幫助！請注意，$ .extend被宣告德默認VAR