jQuery插件基礎框架

我是使用jQuery的新手。我試圖建立一個插件，但它沒有奏效。爲什麼？jQuery插件基礎框架

以下是我有：

<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    (function($){ 
     $.alert = function(settings){ 
     var config = { 
      // settings 
      'text': "old text", 
      'smily': ":(", 
      // ... 
     }; 
     if (settings){$.extend(config, settings);} 
     // variables 
     var i = 0; 
     // script 
     alert(config.text + " " + config.smily); 
    }; 
    </script>  
</head> 

<body> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $.alert(text: "new text", smily: ";)"); 
}); 
</script> 
</body>

來源

2011-09-08 fteinz

分配$.extend返回值（similar question）

if (settings) { config = $.extend({}, config, settings); }

，並調用它是這樣的：

$(document).ready(function() { 
    $.alert({ text: "new text", smily: ";)" }); 
});

也從一個工作演示的最後一個默認值'smily': ":(",

Click here刪除昏迷。

來源

2011-09-08 13:46:55 AlexBay

我已經嘗試過但是它不工作[鏈接]（http://jsbin.com/eveduc/2/edit#html,live） – fteinz

編輯了一個工作演示，檢查它 – AlexBay

你有沒有檢查演示是否適合你？ – AlexBay

簡短演示：

(function($){ 
$.fn.pluginas = function(options) { 
    var defaults = { 
    width: 300, 
    param: "Par", 
    param2: "Par2", 
    }; 
    var options = $.extend(defaults, options); 
    return this.each(function() { 
    }); 
}; 
})(jQuery);

該如何應該是：

(function($){ 

$.alert = function(settings){ 
    var config = { 
    // settings 
     text: "old text", 
     smily: ":(", 
    // ... 
    }; 

    if (settings){$.extend(config, settings);} 
    // variables 
    var i = 0; 

    // script 
    alert(config.text + " " + config.smily); 
} 
})(jQuery);

來源

2011-09-08 13:37:34

'「興高采烈」：「:(」，'應該是' 'smily'：「:(」''和'param2：「Par2」，'應該是'param2：「Par2」' –

我試過了但它不工作[在jsbin中看到它]（http://jsbin.com/oyopam/edit＃html，live） – fteinz

我不知道你打算如何處理它，但你的插件似乎工作。你只是沒有正確地調用它：而不是$.alert(text: "new text", smily: ";)");嘗試$.alert({text: "new text", smily: ""});

在開發插件時，保留一些標準是很好的（這些標準可以在http://docs.jquery.com/Plugins/Authoring上看到）。
寫一些插件後，我決定遵循標準和發展，應該是我今後所有的插件的基礎插件模板：

/** 
*  PLUGIN NAME : 
*  VERSION  : 
*  AUTHOR  : yourname (yourname [at] domain [dot] com) 
*  DESC  : 
*  USAGE  : 
**/ 
(function($,window,undefined){ 
    $.fn.pluginName = function(o){ 
     // some globals 
     var options = $.extend({},$.fn.pluginName.defaults,o); 

     // constructor 
     function pluginName(el,o){ 
      var api = this, 
       $el = $(el); 

      //internal api 
      function _initialise(options){ 

      } 

      function _destroy(){ 

      } 

      // external api 
      $.extend(api,{ 
       initialise : function(){ 
        _initialise.apply(api,arguments); 
        return api; 
       }, 
       destroy : function(){ 
        _destroy.apply(api,arguments); 
        return api; 
       }, 
       reinitialise : function(){ 
        return 
         api 
          .destroy() 
          .initialise.apply(api,arguments); 
       }, 
      }); 
      // initialise 
      _initialise(o); 
     } 

     return $(this).each(function(){ 
      var that = $(this), 
       api = that.data('pluginNameApi'); 
      if(api instanceof pluginName) 
       api.reinitialise(options); 
      else 
       that.data('pluginNameApi',new pluginName(that.get(0),options)); 
     }); 
    } 

    $.fn.pluginName.defaults = { 

    } 
    $.fn.pluginName.version = 1.0; 
})(jQuery,window);

來源

2011-09-08 13:50:30

但只有在這個改變它不工作！ – fteinz

jQuery插件基礎框架

回答

相關問題