编写一个简单的插件/组件答案

【问题标题】：Writing a simple plugin/component编写一个简单的插件/组件
【发布时间】：2013-06-01 01:37:26
【问题描述】：

我想写一个这样的组件（或插件）。
当我写信时：
var a = new myPluginName ('#myElement', { bla:bla});
或

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

它必须创建两个输入。就这样。我怎样才能做到这一点？你能给我一个这样的例子吗？或者任何想法都会有所帮助。

换句话说，我的目标是用我的组件创建两个输入。
谢谢。

【问题讨论】：

你想让你的插件创建两个输入，还是将它们附加到某个东西中，或者创建一个输入，然后调用它两次，你需要指定问题。
我需要用我的插件创建两个输入

标签： javascript jquery plugins input components

【解决方案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" />

【讨论】：

很好。但是如何使用插件创建输入？
尝试使用 jquery 并将您的问题一一发布为新问题。谷歌了一下 jquery 插件。玩得开心！ ;-)