0

我制作了一些 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'});
4

1 回答 1

0

解决方案 1： jQuery 小部件工厂

见http://jqueryui.com/widget/

解决方案 2：

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

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

http://jsfiddle.net/jSwhN/

我个人使用小部件工厂，但解决方案 2 很方便。

于 2013-06-05T11:19:44.407 回答