JavaScript  »  Articoli  »  Effetti e controlli Javascript 

In questo articolo spiegherò come realizzare un utile plugin Javascript per la creazione di tooltip, permettendo agli utenti di visualizzare un testo descrittivo supplementare al passaggio del mouse sopra link o altri elementi. Il codice dell'esempio finale utilizza Prototype e Scriptaculous, e ci offre l'occasione di esplorare l'uso e la creazione di una classe, con un approccio object oriented più tipico di Java, PHP o Ruby che di Javascript. Grazie alla classe sarà possibile creare e personalizzare i tooltip con estrema facilità, utilizzando anche più istanze nello stesso documento, senza dover scrivere codice inutile o ridondante. Il codice presentato è in grande parte derivato da vari altri script che meritano una abbondante esplorazione se utilizzate Prototype e siete interessati all'uso dei tooltip: Cooltips, Cordinc tooltip,Tooltip-v0.2, Anatips.

Javascript OOP

È inizialmente necessario soffermarsi su alcune funzionalità che Prototype aggiunge a Javascript per la crazione delle classi. Class.create è la sintassi necessaria per la costruzione di una nuova classe: si assegna Class.create ad una variabile che è il nome della classe. Dobbiamo immaginare la classe come un contenitore che ingloba e gestisce tutte le funzioni necessarie al nostro script, come una grande funzione (e in effetti lo è) che dispone di vari metodi. La struttura tipo del codice è più o meno così: Class.create({ function1, function2, function3 }).

Grazie a Prototype, la classe può disporre di un costruttore, cioè di un metodo che viene eseguito quando la classe è istanziata. Tale metodo è chiamato initialize().

Appena viene creata una nuova istanza della classe la funzione initialize() verrà eseguita e con essa anche le eventuali istruzioni contenute. Questo costruttore può accettare degli argomenti che verranno passati nel momento in cui viene dichiarata una istanza della classe tramite la keyword new. Un tentativo di utilizzo in questo esempio:

<a id="myButton" href="#">passami sopra con il mouse per testare l'esempio</a>
<script>
var MyClass = Class.create({ 	
	initialize : function(button, message) {                     		
		this.button 	= $(button); 		
		this.message	= message;         
		this.button.observe('mouseover', this.getMessage.bindAsEventListener(this)); 	
	},       
	getMessage : function(e) { 		
		this.newMessage = this.message + ' ( attivata dall\'evento ' + e.type + ' sul link con id ' + Event.element(e).id + ' )';
		this.showMessage();     
	},       
	showMessage : function(){
		this.button.up().insert(this.newMessage);     
	}
});
new MyClass('myButton', 'prova inserimento Tooltip'); </script>

Da osservare attentamente l'uso della keyword this, che permette rapidi riferimenti tra elementi e metodi della classe: in particolare, Prototype estende l'oggetto function con due metodi, bind() e bindAsEventListener(), che consentono alla funzione a cui sono applicati di poter passare  un argomento per un'esecuzione ulteriore, senza perdere il riferimento che lo associa a un determinato oggetto. In particolare bindAsEventListener() viene utilizzato per passare al gestore l'oggetto event come primo argomento, e in modo cross-browser per assicurare la compatibilità anche con i browser più datati...

Dalla teoria alla pratica.

Vediamo subito in un altro esempio un semplice script per i tooltip, già funzionante, con caratteristiche essenziali (come dire, il minimo indispensabile). Ecco il codice necessario da includere nell'head della nostra pagina:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="protip-simple.js"></script>
<script type="text/javascript">
var startDemo = function() {
  $$("a.demo").each( function(node) {
    new Protip(node); 		
  }); 
} 
document.observe('dom:loaded', startDemo);
</script>
<link href="css/protip.css" rel="stylesheet" type="text/css" />

Altri articoli

Altre guide

Altre newsletter