In questo articolo vorrei introdurre una semplice tecnica per aggiungere un metodo statico ai nostri plugin. Un metodo statico opera sui dati del plugin ma può essere invocato anche al di fuori del plugin stesso. Vediamo insieme i dettagli.
Definiamo un semplice plugin di partenza:
(function($) {
$.fn.test = function(options) {
var that = this;
var settings = {
message: 'Test'
};
options = $.extend(settings, options);
// metodi statici qui
return that.each(function() {
$(that).text(options.message);
});
};
})(jQuery);
Il plugin si limita ad inserire una stringa in un elemento. Ora aggiungiamo i due metodi statici:
// metodi statici qui
$.test = {};
$.test.callback = function() {
alert(options.message + ' called.');
};
$.test.reset = function() {
options.message = '';
that.text(options.message);
};
Abbiamo creato un oggetto all'interno del namespace del plugin e gli abbiamo aggiunto due metodi che operano in questo caso sulle opzioni del plugin. Possiamo usare questi metodi come segue:
$(function() {
var test = $('#test');
var call = $('#call');
var reset = $('#reset');
test.test({message: 'OK'}); // uso normale del plugin
call.click(function() {
$.test.callback(); // invocazione del primo metodo
return false;
});
reset.click(function() {
$.test.reset(); // invocazione del secondo metodo
return false;
});
});
I due metodi restituiranno i dati contenuti nelle opzioni del plugin, in quanto essi operano all'interno del suo namespace. Potete visionare l'esempio finale in questa pagina.