0

私はいくつかのjqueryプラグインを作成しましたが、通常のjqueryプラグインのように呼び出されないため、プラグイン自体ではありませんが、オブジェクトの新しいインスタンスを作成し、メインのdivを最初の引数として追加し、構成オブジェクトリテラルを追加する必要があります2 番目の引数として。

私にとってはすべて問題なく動作しますが、実際の 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/

個人的にはWidget Factoryを使っていますが、解決策2が便利です。

于 2013-06-05T11:19:44.407 に答える