JavaScript  »  Articoli  »  MooTools 

Creazione

Ora che abbiamo analizzato tutte le meccaniche di cui possiamo avvalerci per la creazione del nostro plugin e le teorie che stanno alla loro base, è ora di passare alla fase finale: la creazione definitiva.

Il plugin che andremo a realizzare permetterà di gestire un elemento DOM della nostra pagina creando una sorta di "wrapper". Esso consentirà di modificare e aggiornare l'elemento in tempo reale diminuendo la quantità di codice da scrivere normalmente necessaria. Premetto che, alcune delle funzionalità presenti in questo script possono essere facilmente realizzate tramite una semplice estensione del costruttore Element, ma per il nostro tutorial una struttura gerarchica e modulare è l'obiettivo ultimo.

Il plugin sarà composto da due classi separate: una superclasse chiamata CustomBase e una classe che la estende denominata CustomSuper. La classe CustomBase avrà i seguenti metodi pubblici:

• changeBg: permette di cambiare il colore dello sfondo di un elemento;
• changeFg: permette di cambiare il colore di primo piano di un elemento;
• update: aggiorna il contenuto di un elemento;
• hide: nasconde l'elemento;
• show: mostra l'elemento.

Ecco la sua struttura:

var CustomBase = new Class({

	// metodo costruttore
	initialize: function(element) {
		this.element = $(element);
		return this;
	},
	
	// metodi pubblici
	changeBg: function(color) {
		this.element.setStyle('background-color', color);
		return this;
	},
	
	changeFg: function(color) {
		this.element.setStyle('color', color);
		return this;
	},
	
	update: function(html) {
		this.element.set('html', html);
		return this;
	},
	
	hide: function() {
		this.display = this.element.getStyle('display');
		this.element.setStyle('display', 'none');
		return this;
	},
	
	show: function() {
		this.element.setStyle('display', this.display);
		return this;
	}

});

Una volta definita la struttura del plugin, è poi possibile passare alla creazione delle istanze:

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

	var el1 = new CustomBase('el1');
	
	el1.changeBg('blue')
	   .changeFg('white').
	   .update('New Text');

});

Altri articoli

Altre guide

Altre newsletter