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

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" />