Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools (VII)

Más métodos del Core

Introducción

En esta página vamos a ver unos cuantos métodos del Core o núcleo de Mootools que suelen ser bastante usados.

Listas de formulario

Distinguir cual es el elemento seleccionado en una lista de formulario tipo "select", es una de las tareas de javascript que requieren varios pasos. Con mootools lo podemos hacer bastante más fácil utilizando el método .getSelected().

Este método nos devuelve un array con los elementos seleccionados. Aunque sólo haya un elemento siempre devuelve un array. Una vez tenemos el array extraemos los elementos y les aplicamos las propiedades text o value.

Veamos un ejemplo. Tenemos el siguiente formulario:

<form action="#" name="estilo">
<p>Elige un color: ... 
<select name="colores" id="colores">
<option value="white">blanco</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
<option value="red">Rojo</option>
<option value="yellow">Amarillo</option>
</select></p>
<p><input type="button" value="Cambia color de fondo" onclick="fondo()"/>
</form>

Con él pretendemos que al pulsar en el botón se cambie el color de fondo de un elemento al indicado en la lista de selección. Para ello en el botón hemos puesto un evento onclick que nos lleva a la función fondo(). Este es el código de la función:

function fondo(){ 
    miColor=$("colores").getSelected();
    miColor=miColor[0].value;
    $("capa1").setStyle("backgroundColor",miColor);
    }

En la primera línea extraemos el array de elementos mediante .getSelected(). En la segunda, como sabemos que sólo tiene un elemento el array, lo extraemos y le aplicamos la propiedad value, que nos dará el color que queremos cambiar. Por último en la tercera línea le aplicamos el color de fondo al elemento.

Ya sólo nos falta incorporar el elemento a la página mediante la línea:

<div id="capa1"></div>

Vemos aquí el resultado, a la derecha tenemos el elemento que queremos cambiar, y aquí debajo el formulario para cambiarlo:

Aquí, para poder verlo con este aspecto, también le hemos dado un estilo CSS al elemento id="capa1" para ponerle un borde, un alto y un ancho:

#capa1 {width: 250px; height: 200px; border: 2px solid black; float: right;}

Seleccionar elementos

Los siguientes métodos nos permiten seleccionar elementos desde la posición relativa que tienen otros dentro de la página, por ejemplo si tenemos una lista, podemos seleccionar el elemento anterior o posterior a un elemento dado, o el primero o el último:

getNext() : Este método nos devuelve el siguiente elemento hermano:

siguiente=$("entrada2").getNext();

getPrevious() : De forma similar, este método devuelve el elemento anterior al indicado:

anterior=$("entrada2").getPrevious();

Para seleccionar el primer o último elemento, debemos pasar como referencia a su elemento padre:

getFirst() : Este método nos devuelve el primer elemento hijo del indicado:

primero=$("elementoPadre").getFirst();

getLast() : Este método nos devuelve el último elemento hijo del indicado:

ultimo=$("elementoPadre").getLast();

Métodos de clases CSS

Los métodos de clases añaden o quitan una clase css a un elemento, de manera que podemos hacerle cambiar de aspecto con un click.

Estos métodos requieren que hayamos creado previamente una o varias clases CSS, Veamos un ejemplo: en primer lugar tenemos que haber definido las clases CSS:

.textoAzul { color: blue; }
.textoRojo { color:red; }

Después definiremos en el código CSS el elemento al que queremos aplicarlo

<div id="capa2">
<h2>Titulo del elemento</h2>
<p id="p1">Parrafo primero</p>
<p id="p2">Parrafo segundo</p>
<p id="p3">Parrafo tercero</p>
</div>

Despues creamos unos botones que contienen estos métodos: Usamos el siguiente código:

<button onclick="$('capa2').addClass('textoAzul')">Poner Texto Azul</button>
<button onclick="$('capa2').removeClass('textoAzul')">Quitar Texto Azul</button>
<button onclick="$('capa2').toggleClass('textoRojo')">Rojo: on/off</button> 

Y vemos aquí el resultado con el elemento y los botones:

Hemos puesto los métodos en los eventos onclick. Estos métodos son los siguientes:

• .addClass() : Añade la clase al elemento seleccionado.
• .removeClass() : elimina la clase al elemento seleccionado.
• .toggleClass() : Combinación de los dos anteriores, si el elemento no tiene la clase se la añade, y si la tiene se la elimina.

Métodos .getElements y .getElement

El método .getElements() selecciona todos los elementos hijos del elemento seleccionado que tengan una misma etiqueta. Estos son devueltos en un array. La etiqueta de selección la pasamos como argumento. Tomamos como ejemplo el contenedor del ejemplo anterior, y escribimos:

parrafos=$("capa2").getElements("p");

El elemento obtenido es un array que contiene todos los párrafos. Si queremos ver el párrafo segundo en una ventana "alert" al hacer click en un botón, escribiremos:

<button onclick="alert(parrafos[1].get('html'))">Ver párrafo 2</button>

y aquí tenemos el botón del ejemplo:

Ver párrafo 2

El método .getElement() funciona de igual manera, pero no devuleve un array, sino sólo el primer elemento hijo que encuentra:

titulo=$("capa2").getElement("h2");

Aquí para mostrar el título "h2" en una ventana "alert", tras pulsar un botón, pondremos el siguiente código:

<button onclick="alert($('capa2').getElement('h2').get('html'))">Ver título </button>

El bótón creado en este ejemplo es el siguiente:

Ver título

En la siguiente página veremos el tratamiento de los eventos con mootools.

Eventos

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com