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++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 19
Visitas el mes pasado: 16
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En esta página vamos a ver unos cuantos métodos del Core o núcleo de Mootools que suelen ser bastante usados.
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;}
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();
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:
Parrafo primero
Parrafo segundo
Parrafo tercero
Hemos puesto los métodos en los eventos onclick. Estos métodos son los siguientes:
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.
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