jQuery plugin met functies

[ZpAz]

Hallo,

Is het ook mogelijk om een meerdere functies binnen een plugin te maken? En zo ja hoe?

Dus dat ik zoiets kan doen:

code:

$(obj).mijnplugin().functie1();
$(obj).mijnplugin().functie2();

ik heb nu dit geprobeert:

code:

jQuery.fn.mijnplugin = function() {

    jQuery.fn.mijnplugin.functie1 = function() {
        alert('functie1');  
        return this;
    }
    
---------of

    this.functie2 = function() {
        alert('functie2');  
        return this;
    }

---------of

       functie3 = function() {
        alert('functie3');  
        return this;
    }
    
    return this;
});

Maar dat werkt niet, ik heb ook al op het internet rondgezocht, maar ik kom er niet uit. (Het laatste voorbeeld kan ik alleen vanuit de plugin zelf aanroepen (soort van private), dat is niet wat ik wil, ik wil hem van buiten kunnen aanroepen)

[ Voor 19% gewijzigd door ZpAz op 07-05-2008 23:06 ]

[neothor]

Ik niet direct vinden of dit kan.

Je kan wel de je plugin zo maken dat je er een string aan meegeeft die binnen je plugin verschillende functies aanroept.

JavaScript:

$("p").plugin("function1");
$("p").plugin("function2");

[_Thanatos_]

Het idee van jQuery is wel dat je dingen achter elkaar kan zetten, omdat een functie teruggeeft wat je erin stopt, dus dan zo:

JavaScript:

$("p").plugin("f1").plugin("f2");

Maar ik zou niet weten waarom, als je jQuery.fn kunt extenden met de ene functie, waarom dat dan niet kan met een tweede:

JavaScript:

jQuery.fn.function1 = function() { ... };
jQuery.fn.function2 = function() { ... };

Die moeten dan beschikbaar zijn op jQuery-objecten, en als je plugin werkt zoals het hoort, kun je die functies er dus achter plakken. MAAR: netjes is anders, want je forceert functies in je plugin die een andere plugin misschien ook wel wil claimen. Dus misschien kun je zoiets maken:

JavaScript:

jQuery.fn.mijnplugin = function() {
  ...
  return jQuery.extend(this, {
    functie1: function() { ... },
    functie2: function() { ... }
  });
};

Zoiets misschien. Ik weet niet precies hoe die extend() werkt, maar het gaat om de constructie.

[Clay]

Als je het met andere jquery dingen wil kunnen blijven chainen kan je al je functies gewoon aan jQuery.fn hangen:

JavaScript:

jQuery.extend(jQuery.fn, {
    mijnPlugin: function() {
        alert('mijnPlugin: '+this.length);
        return this;
    },

    functie1: function() {
        alert('functie1: '+this.length);
        return this;
    },

    functie2: function() {
        alert('functie2: '+this.length);
        return this;
    }
});

En dan met bv wat paragrafen in je html:

JavaScript:

$(function(){
    $('p').mijnPlugin().functie1().functie2()
});

Plugins die hele specifieke dingen doen zie je vaak in een closure, met een extend naar buiten toe om hem aan te kunnen roepen:

JavaScript:

function($){

    var dingen = 'lorem ipsum'; // lokaal gescopen ftw
    
    function MijnPlugin() {
        // dingen
    }

    MijnPlugin.prototype = {
        // meer dingen
    }

    $.extend($.fn, {
        mijnPlugin:function() {
            // iets met each en new MijnPlugin(this);'s
            return this;
        }
    });

}(jQuery);

[ Voor 29% gewijzigd door Clay op 08-05-2008 09:44 ]

[ZpAz]

Clay schreef op donderdag 08 mei 2008 @ 09:34:
Als je het met andere jquery dingen wil kunnen blijven chainen kan je al je functies gewoon aan jQuery.fn hangen:

JavaScript:

jQuery.extend(jQuery.fn, {
    mijnPlugin: function() {
        alert('mijnPlugin: '+this.length);
        return this;
    },

    functie1: function() {
        alert('functie1: '+this.length);
        return this;
    },

    functie2: function() {
        alert('functie2: '+this.length);
        return this;
    }
});

En dan met bv wat paragrafen in je html:

JavaScript:

$(function(){
    $('p').mijnPlugin().functie1().functie2()
});

Thanks, dat eerste is an sich wel goed, maar nu kan je functie2 ook zo aanroepen:

$('p').functie2()

Dus zonder dat je eerst de hoofdfunctie aan moet roepen zeg maar, ik weet niet of dat mogelijk is.

[Clay]

Ja, als je alles gewoon aan jQuery.fn hangt kan je het in een willekeurige volgorde chainen. Als dat expliciet niet de bedoeling is moet je het meer als een plugin gaan schrijven op die 2e manier - maar da's natuurlijk niet het idee van zo'n jQuery chain. 'k zou me als ik jou was ff afvragen of die 2e call echt in de chain hoort, of dat dat interne functionaliteit is van je plugin. Wat probeer je ueberhaupt?

[ZpAz]

Nu zou ik ook zoiets kunnen doen:

$(obj).block('edit');

oid bedenk ik me nu, en dat ik dan met een case kijk wat er nou moet gebeuren.

In ieder geval bedankt voor de hulp.

[ Voor 114% gewijzigd door ZpAz op 08-05-2008 12:14 ]