jQuery: come far scegliere agli utenti dei plugin quale effetto usare

Un mio lettore tempo fa mi ha rivolto una domanda interessante: come posso far decidere a chi usa il mio plugin quale effetto jQuery usare? La risposta è insita nella natura stessa degli elementi jQuery, che sono a tutti gli effetti dei normali oggetti JavaScript.

Negli oggetti JavaScript è possibile aggiungere dinamicamente una proprietà o un metodo utilizzando la notazione a parentesi quadre, ossia oggetto[metodo]. Essendo oggetti JavaScript, gli elementi jQuery accettano la medesima notazione. Quindi scrivere $(elemento).slideUp() oppure $(elemento)['slideUp']() è equivalente.

Ecco quindi come riusciremo a fare in modo che gli utenti possano scegliere il loro effetto:

(function($) {
    $.fn.plugin = function(options) {
        options = $.extend({
            method: 'fadeOut',
            speed: 800,
            callback: function() {}
        }, options);
        
        return this.each(function() {
            var elem = $(this);
            setTimeout(function() {
                elem[options.method](options.speed, options.callback);
            }, options.speed);
        });
    };
})(jQuery);


$('#test').plugin({method: 'slideUp'});

La notazione a parentesi quadre ci permette di utilizzare le opzioni del plugin per specificare l'effetto voluto da utilizzare nel nostro plugin. Ovviamente è necessario rispettare la sintassi dell'effetto jQuery di riferimento.