JavaScript  »  Articoli  »  MooTools 

L'elemento con id 'el1' assumerà un colore di sfondo "blue", un colore di primo piano "white" e avrà come nuovo contenuto il testo "New Text". Nota importante: è molto elegante e usabile restituire la corrente istanza in ogni metodo che non ha un valore restituito definito: in questo modo sarà possibile concatenare più chiamate contemporaneamente.

Con la classe CustomSuper, il nostro plugin guadagna molte più caratteristiche. Ecco le nuove funzionalità dei metodi pubblici ridefiniti:

• update: aggiorna il contenuto di un elemento se si passa una stringa, se si passa un oggetto vengono settate le proprietà dell'elemento;
• hide: nasconde l'elemento. Se si passa true viene nascosto con un'animazione;
• show: mostra l'elemento. Se si passa true viene mostrato con un'animazione.

Inoltre, la classe CustomSuper implementa il costruttore Options: sarà cosi possibile settare la durata delle animazioni interne. Ecco la sua struttura completa:

var CustomSuper = new Class({

	options: {
		duration: 2000
	},

	Extends: CustomBase,
	
	Implements: [Options],

	initialize: function(element, options) {
		this.parent(element);
		this.setOptions(options);
		this.element.set('morph', {link: 'chain', duration: this.options.duration});
		return this;
	},
	
	update: function(html) {
		($type(html) == 'object') ? this.element.setProperties(html) : this.parent(html);
		return this;
	},
	
	hide: function(fx) {
		this.height = this.element.getStyle('height');
		(fx) ? this.element.morph({height: 0}) : this.parent();
		return this;
	},
	
	show: function(fx) {
		(fx) ? this.element.morph({height: this.height}) : this.parent();
		return this;
	}

});

Anche in questo caso, possiamo passare alla creazione delle istanze:

window.addEvent('domready', function() {

	var el2 = new CustomSuper('el2');
	   
	 el2.update({class: 'new_class'})
	 	.hide(true)
		.show(true);

});

In questo secondo gradino della gerarchia abbiamo ampliato notevolmente le funzionalità della classe base, senza l'occorrenza di riscrivere le parti già definite in precedenza: modularità in primo piano.

Potete trovare tutto il codice dell'applicazione, completo di HTML, in questa demo. Ecco inoltre il link per scaricare il pacchetto completo contenente file HTML, MooTools e lo script inline del nostro plugin.

Conclusione

Come abbiamo potuto vedere, tramite MooTools possiamo creare vere e proprie gerarchie di classi molto simili a quelle realizzabili con le teorie della OOP originale, ma avvalendoci del linguaggio Javascript. Questo ci consente di creare plugin collegati tra loro che condividono risorse e funzionalità.

Ovviamente la complessità delle gerarchie dipende fortemente dal progetto e dal proprio obiettivo finale. Quello che è fondamentale capire sono i mezzi e le teorie che il framework ci mette a disposizione e le metodologie per sfruttarle al meglio. In questo tutorial sono racchiusi tutti questi concetti.

Altri articoli

Altre guide

Altre newsletter