編寫一個簡單的插件/組件

Question

我想編寫一個組件（或插件）。
當我寫：
var a = new myPluginName ('#myElement', { bla:bla});
或

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

必須創建兩個輸入。就這樣。 我該怎麼做？你能給我舉個例子嗎？或者任何想法都會有所幫助。

換句話說，我的目標是用我的組件創建兩個輸入。
謝謝。

Answer 1

你可以這樣創建自定義的jQuery插件：

(function($){ 
$.fn.extend({ 
    //plugin name - inpuX 
    inputX: function(options) { 
     var defaults = { 
      width: 200, 
      defaultPadding: 2, 
      border: '2px solid red' 
     }; 

     var options = $.extend(defaults, options); 

     return this.each(function() { 
       var o =options; 
       var obj = $(this);        

       $(obj) 
        .css('padding', o.defaultPadding) 
        .css('width', o.width) 
        .css('border', o.border) 
        .css('display', 'block'); 
     }); 
    } 
}); 
})(jQuery); 

，然後調用它像這樣：

$('#inputA').inputX({width: 150, defaultPadding:5, border: '1px dashed black'}); 
$('#inputB').inputX({width: 200, defaultPadding:10}); 

在HTML元素：

<input id="inputA" type="text" /> 
<input id="inputB" type="text" />