In questo articolo vedremo come creare elementi HTML tramite mootools, come inserirli all’interno di un documento HTML e come modificarne le proprietà principali.

Per creare elementi HTML mootools mette a disposizione la classe Element; inoltre è possibile specificare, al momento della creazione, anche i vari attributi che saranno poi applicati direttamente all’elemento.

Una volta imparato a creare elementi con questa classe, questi elementi possono essere usati come contenuto del mooPanel.

La sintassi per utilizzare questa classe è la seguente:

var myEl = new Element(element[, properties]);

dove:

• element: Rappresenta il nome del tag dell’elemento da creare.
• properties: Sono le proprietà da applicare all’elemento element.

Andiamo a vedere subito come creare un div avente id “pippo”, alto 100px , largo 200px e avente uno sfondo rosso.

La sintassi è la seguente:

var mio_div = new Element('div',{
     'id': 'pippo',
     'styles':{
         'background': 'red',
         'height': '100px',
         'width': '200px'
     }
});

Insomma, fino ad ora niente di più semplice.

Vediamo un ulteriore esempio, di creazione di un tag a con varie proprietà applicate e anche degli eventi associati:

var myAnchor = new Element('a', {
      'href': 'http://mootools.net',
      'class': 'myClass',
      'html': 'Click me!',
      'styles': {
         'display': 'block',
         'border': '1px solid black'
      },
      'events': {
         'click': function(){
              alert('clicked');
         },
         'mouseover': function(){
              alert('mouseovered');
         }
      }
});

Prima di vedere come inserire i nostri elementi all’interno del DOM, andiamo a vedere come recuperare gli elementi tramite mootools.
Per recuperare gli elementi mootools mette a dispoizione diverse funzioni; andiamo a vedere le principali:

$: Permette di riprendere un elemento dal suo id.
Andiamo a vedere un esempio:

var myElement = $(el);

el è una stringa che rappresenta l’id dell’elemento che vogliamo riprendere.
Ad esempio se volessimo riprendere l’elemento div creato precedentemente, avente id=’pippo’:

var div_pippo = $('pippo');

$$: Seleziona elementi del DOM; ritorna un array di tutti gli elementi che soddisfano la condizione.

La sua sintassi è la seguente:

var myElements = $$(aTag[, anElement[, Elements[, ...]);

Supponiamo di voler recuperare tutti i tag a aventi classe ‘myClass’ e che si trovano nel dom all’interno dell’elemento avente come id ‘myElement’; la sintassi è la seguente:

$$('#myElement a.myClass');

Per inserire gli elementi all’interno del DOM mootools mette a disposizione numerose funzioni; di seguito ne esaminiamo solamente una ma ne esistono numerosi.
adopt: Permette di inserire l’elemento(o gli elementi) passato(passati) all’interno di un elemento HTML.
La sintassi è la seguente

elementoPadre.adopt(el[, altriElementi]);

Supponiamo di voler inserire all’interno del div_pippo recuperato in precedenza i 3 elementi elemento1, elemento2 ed elemento3; la sintassi da utilizzare è la seguente:

div_pippo.adopt(elemento1, elemento2, elemento3);

Come ultima cosa, facciamo una breve panoramica su alcune funzioni di utilità che è possibile utilizzare con gli elementi creati(o recuperati) tramite mootools.
Una prima funzione senz’altro importante è la funzione addClass.
Questa funzione permette di aggiungere una classe CSS ad un elemento.
La sintassi è la seguente:

elemento.addClass('nomeClasseCss');

Supponiamo di voler aggiungere al nostro div_pippo la classe css ‘eqepa_css’; la sintassi è la seguente:

div_pippo.addClass('eqepa_css');

Un’altra funzione è setStyle.
Questa funzione permette di settare una proprietà css di un elemento(ovviamente questi stili saranno inline all’elemento); la sintassi è la seguente:

elemento.setStyle('nomeProprietà', 'valoreProprietà');

Supponiamo di voler, sempre al nostro caro div_pippo, settare un margin-top pari a 15px; la sintassi da utilizzare è la seguente:

div_pippo.setStyle('margin-top','15px');

Per ottenere invece le proprietà css si usa la funzione getStyle, che prende in ingresso una stringa che rappresenta il nome della proprietà e restituisce il valore; la sintassi è dunque la seguente:

elemento.getStyle('nomeProprietà');

Dunque, supponendo di voler sapere il valore di margin-top che ha l’elemento(indovinate un po’?? ) div_pippo, la sintassi è la seguente:

div_pippo.getStyle('margin-top');

che restituirà dunque una stringa che ha come valore ‘15px’.

Questo articolo vuole essere solo una breve panoramica alla classe Element di mootools, anche appunto per permettere di utilizzarla nel creare il contenuto della classe mooPanel; per qualsiasi approfondimento rimandiamo alla guida ufficiale presente sul sito di mootools.
Per qualsiasi richiesta, informazione o segnalare qualsiasi errore, potete lasciare un commento!