2012-06-10 51 views
0

我試圖做一個插件(從其他代碼我有),但我只是不能得到選項的一部分工作d:jQuery插件錯誤

插件(到目前爲止):

(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中的選項:

回答

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/

+0

唉唉,謝謝:d – Mobilpadde

+0

不客氣:-D –

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); 
1
$.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