Con l’articolo di oggi presento il primo (semplice) plugin per jQuery che metto a disposizione di chiunque ne abbia bisogno. Il plugin è molto semplice e lo scopo principale è prettamente didattico più che di utilità vera e propria.
Il titolo di oggi infatti poteva più essere orientato ad una guida alla creazione di un plugin per jQuery piuttosto che quello originale.
Veniamo però al plugin.
L’ho chiamato InputFocus e, il suo scopo, è quello di facilitare l’evidenziazione dei campi di input e delle textarea quando si digita al loro interno. Ci sono molti plugin per jQuery che hanno “anche” questa funzione ma spesso ne contengono anche molte altre che magari non ci servono quindi anzichè appesantire il sistema o dover ogni volta riscrivere le stesse righe di codice per ogni oggetto, ho preferito fare un piccolissimo plugin, spiegandolo passo passo.
Per chi volesse scaricarlo, è disponibile un semplice pacchetto zippato al seguente indirizzo:
Download jQuery.inputfocus
Vediamo il plugin in azione. Il codice completo è il seguente:
$.fn.inputfocus = function(params) {
params = $.extend({
focus_class: "focus", //class name of focus event
value: "" //value of the object on blur event
}, params);
this.each(function() {
$(this).focus( function() {
$(this).addClass(params.focus_class);
this.value = (this.value == params.value)?'':this.value;
});
$(this).blur( function() {
$(this).removeClass(params.focus_class);
this.value = (this.value == '')?params.value:this.value;
});
});
return this;
};
Analizzandolo passo passo invece, vediamo anche come realizzare un semplice plugin per jQuery:
$.fn.inputfocus = function(params) {
//....all code here
};
La prima riga è quella che estende il noto framework con un nuovo metodo che porta il nome che vogliamo dare al plugin e che sarà richiamato ogni volta vorremmo utilizzarlo (in questo caso inputfocus). Ovviamente tale metodo potrà contenere al proprio interno dei parametri, che andremo a definire con il seguente codice:
//...
params = $.extend({
focus_class: "focus", //class name of focus event
value: "" //value of the object on blur event
}, params);
//...
Creiamo quindi un array params con i parametri che conterrà il plugin, dandogli dei valodi di default iniziali. Una volta definite le basi passiamo al codice vero e proprio:
//...
this.each(function() {
$(this).focus( function() {
$(this).addClass(params.focus_class);
this.value = (this.value == params.value)?'':this.value;
});
$(this).blur( function() {
$(this).removeClass(params.focus_class);
this.value = (this.value == '')?params.value:this.value;
});
});
//...
Tutto il codice sarà contenuto all’interno della funzione this.each(…); che sta ad indicare le operazioni da compiere ogni volta che incontreremo un oggetto che farà al nostro caso. In questo caso non fa altro che aggiungere una classe CSS o rimuoverla ogni volta che si verificano gli eventi focus e blur.
Al termine di tale funzione non resta che restituire l’oggetto:
return this;
Attivare il plugin è facilissimo, basta il seguente codice:
$(document).ready(function(){
$("input[type=text]").inputfocus({value: "Search..."});
$("input[type=password]").inputfocus();
$("textarea").inputfocus({value:"Please, insert notes."});
});
Una semplice demo che contiene il codice necessario al funzionamento all’interno del documento html è visualizzabile al seguente indirizzo:
Demo InputFocus
La realizzazione di un plugin jQuery non è per nulla difficile e non richiede di certo competenze avanzatissime! Spero che questo piccolo plugin (tutorial) possa essere utile a qualcuno per incominciare a lavorare con jQuery e con i suoi plugin.
Riferimenti:
Benvenuto! Mi chiamo