Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 23

Visitas el mes pasado: 20

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools (VII)

Más métodos del Core

imagen mootools

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:

Elige un color: ...

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:

Titulo del elemento

Parrafo primero

Parrafo segundo

Parrafo tercero

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


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:

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:






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

Eventos



Manual de Mootools (I Básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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