新手jQuery插件問題

我剛剛進入jQuery插件，我想用一個準系統面向對象的插件模板做一種'hello world'練習。但是我無法在下面的setup（）函數中獲取console.log語句以在Firebug控制檯窗口中顯示。新手jQuery插件問題

我所說的插件，像這樣：

<script type="text/javascript" src="myPlugin.js" > 
<script type="text/javascript"> 
    $(document).ready() { 
    $('ul').myPlugin(); 
    }); 
</script>

myPlugin.js：

;(function($) { 

    $.fn.extend({ 
     myPlugin: function(options) { 
      return this.each(function() { 
       new $.MyPlugin(this, options); 
      }); 
     } 
    }); 

    $.MyPlugin = function(element, options) { 
     var defaults = {   
      helloText: "hello World"   
     } 

     this.options = $.extend({}, defaults, options || {}); 

     this.setup();  
    }; 

    $.extend($.MyPlugin.prototype, { 

    setup: function() { 
     console.log(this.helloText);   
    } 
    }); 
})(jQuery);

就像我說的，在設置（）函數不顯示的console.log語句。我不知道爲什麼。但是，如果我把一個的console.log語句緊隨頂線，例如，它的工作：

;(function($) { 
    console.log('hello world');

.....有人可以告訴我，我做錯了什麼？

來源

2009-11-17 echobase

您的來電是不正確的：

<script type="text/javascript" src="myPlugin.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('ul').myPlugin(); 
    }); 
</script>

來源

2009-11-17 03:29:54 SimonDever

豚草指出你問的問題，因爲你的電話是不正確的。您的.ready()不包含該功能。

但是，您可能要考慮設置您的插件有點不同。現在，沒有人可以在全球範圍內覆蓋您的默認設置，並且您使用.extend模糊了您正在嘗試執行的操作。這是我會建議設置你的插件，當然，每個人都不同的看法：

;(function($) { 

    $.fn.myPlugin = function(options) { 
    return this.each(function() { 
     (new $.MyPlugin(this, options)); 
    }); 
    }; 

    $.MyPlugin = function(element, options) {  
    this.options = $.extend({}, $.MyPlugin.defaults, options); 

    this.setup = function(){ 
     console.log(this.helloText); 
    }; 

    this.setup();   
    }; 

    $.MyPlugin.defaults = {      
    helloText: "hello World"      
    }; 

})(jQuery);

除了作爲更容易理解，現在有人可以覆蓋你的選擇通過使用所有的調用插件這樣的：

$.MyPlugin.defaults.helloText = "Something Else"; 
$('ul').myplugin(); // Outputs 'Something Else' to the console

我已經寫了jQuery插件的輔助稱爲Starter for jQuery但也有噸的其他偉大的資源在那裏。

來源

2009-11-17 04:41:00

新手jQuery插件問題

回答

相關問題