Question

我制作了一些jquery插件，但它们本身不是插件，因为它们不像普通的jquery插件那样调用，而是你必须创建一个新的对象实例，添加主div作为第一个参数和配置对象文字作为第二个参数。

这对我来说都很好，但我想把它变成一个真正的jquery插件。

看看以下代码：

CSS：

p {
    color: red;
}

HTML：

<div class="p1"><p>text 1</p></div>
<div class="p2"><p>text 2</p></div>
<div class="p3"><p>text 3</p></div>

JS / jQuery的：

function changeColor() {
    var self = this;

    this.config = {
        color: 'green'
    };

};

changeColor.prototype.init = function(elem, config) {
    var self = this;

    this.elem = elem;

    $.extend(this.config, config);

    self.blueColor();
};

changeColor.prototype.blueColor = function() {
    var self = this;

    $(self.elem + ' p').css('color', self.config.color);
};


(function() {
// create new instances 
    var c1 = new changeColor();
    c1.init('.p1', {
        color: 'blue'
    });


    var c2 = new changeColor();
    c2.init('.p3', {
        color: 'yellow'
    });

})();

我想要的是能够在同一页面中调用我的插件任意次数（针对不同的div），但使用普通的jquery插件方式。

所以，而不是以下我必须通过这样做来启动“插件”：

var c1 = new changeColor();
    c1.init('.p1', {
        color: 'blue'
    });

我想用：

来做

$('.p1').init({color:'blue'});

Answer 1

解决方案1： jQuery Widget Factory

请参阅http://jqueryui.com/widget/

解决方案2：

(function($) {
    $.fn.testFunction = function() {
        console.log('test');        
    };
})(jQuery);

$(document).ready(function() {
    $('#test').testFunction(); 
});

http://jsfiddle.net/jSwhN/

我个人使用Widget Factory，但解决方案2很方便。

将使用$ .extend的对象实例转换为适当的jquery插件

1 个答案: