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: 62

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 (III)

Métodos get y set

imagen mootools

La estructura "domready"

Ya hemos visto en la página anterior cómo localizar los elementos en el DOM. También hemos visto la estructura "domready". Si insistimos aquí en esta estructura es por la importancia que tiene para manipular los elementos del DOM.

Antes de seguir diremos que todos los métodos y objetos de mootools que veremos a continuación están en el Core o núcleo de mootools, por lo que para su uso sólo tenemos que enlazar este archivo.

En javascript para trabajar con cualquier elemento, éste debe estar totalmente cargado e incorporado a la página. Esto quiere decir que tenemos que asegurarnos de que el elemento esta listo para poder ser manipulado. Por lo tanto tenemos que poner el código dentro de la estructura "domready" para poder manipularlo:

window.addEvent("domready",function() {
//aquí añadimos el código para manipular el dom ...
});

También tendremos que tener la página cargada al utilizar funciones de eventos activados por el usuario (por ejemplo mediante el atributo "onclick"). En este caso no es necesario que el código esté dentro de la escructura "domready", ya que el usuario, normalmente, activa la función con la página ya cargada.


Lectura y Escritura

Los métodos .get() y .set() son dos métodos de mootools que aplicamos a los elementos de la página. Recordemos que los elementos de la página se obtienen mediante los métodos $() y $$() de mootools. Sobre estos elementos aplicamos los métodos .get() y .set para acceder a las propiedades de los elementos. El método "get" permite la lectura de las propiedades:

url_img=$("imagen1").get("src");

Como argumento del método "get" pasamos la propiedad de la que queremos obtener su lectura, la cual recogemos en una variable.

El método set() permite la escritura de propiedades: si la propiedad no existe ésta se crea, y si existe, cambia su valor:

$("imagen1").set("src","objetos/imagen1.jpg");

Este método tiene dos argumentos, el primero es el nombre de la propiedad que queremos cambiar, y el segundo el nuevo valor de esta propiedad.

Las propiedades de los elementos que podemos leer o escribir mediante los métodos get() y set(), es decir, las que pasamos como primer argumento dentro del paréntesis, son las siguientes:


Ejemplo de "html" y "text"

Veamos aquí un ejemplo en el que vemos la diferencia entre "html" y "text". Creamos un elemento, en el que al pulsar sobre él aparece un mensaje de alerta con su propio contenido, el código será el siguiente:

<p id="respuesta1" onclick="alert($(this).get('html'))">
Texto de prueba con <b>negrita</b> y <i>itálica</i> </p>

Usamos aquí la propiedad html. y el resultado será algo parecido a lo siguiente:

Texto de prueba con negrita y itálica

Al hacer click sobre el texto anterior aparece una alerta en la que vemos que se conserva el html, incluidas las etiquetas. Por otra parte destacamos en el código el uso de this para referirnos al propio elemento en el que estamos.

Cambiamos ahora en el código anterior la propiedad "html" por la propiedad "text", el código es casi el mismo y quedará así:

<p id="respuesta1" onclick="alert($(this).get('text'))">
Texto de prueba con <b>negrita</b> y <i>itálica</i> </p>

Ahora al pulsar sobre el elemento, ya no vemos las etiquetas html, las cuales no se han conservado, sino sólo el texto:

Texto de prueba con negrita y itálica



Ejemplo de modificar atributos

Una de las principales tareas de "get" y "set" es modificar elementos como enlaces o imágenes. Así, modificando el atributo href del enlace, modificamos la ruta hacia la que apunta. Del mismo modo, cambiando el atributo src de una imagen, cambiamos una imagen por otra.

Vamos a hacer aquí un ejemplo de un elemento al que le podemos cambiar las imágenes mediante unos botones controlados por el usuario.

En primer lugar ponemos el código HTML, el cual será el siguiente:

<div id="capa1" style="height: 220px">
<img src="" alt="" title="" id="img1"/>
<p id="pie_img"></p>
</div>

Dentro de un "div" colocamos dos etiquetas, la primera es de una imagen vacía, y la segunda de un párrafo vacío.

Este div tiene asociado un código CSS en la hoja de estilos, para poder verlo adecuadamente:

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

Creamos dos botones, los cuales nos servirán para ver y cambiar de foto en el div. Su código HTML es el siguiente:

<p><input type="button" value="Grecia" onclick="foto(1)" /> ..//..
<input type="button" value="Egipto" onclick="foto(2)" /> </p>

Estos dos botones los vemos así:

..//..

Y para que funcionen estos dos botones debemos asociarlos a un código javascript-mootools que será el siguiente:

window.addEvent("domready",function() {
img1=$("img1");
pie_img=$("pie_img");
});
function foto(num) {
     if (num==1) {
        url="objetos/foto1.jpg";
        texto="Partenón, Atenas, Grecia."
        }
     else if (num==2) {
        url="objetos/foto2.jpg";
        texto="Templo de Abu Simbel, Egipto."
        }
     img1.set({"src":url,"width":"100%","alt":texto,"title":texto});
     pie_img.set("html",texto);
     }

En el código, después de localizar los elementos en el DOM, les aplicamos el método "set" para variar sus propiedades. Al variar sus propiedades cambiamos también la imagen y el contenido del párrafo. Tal vez nos llame la atención la línea:

img1.set({"src":url,"width":"100%","alt":texto,"title":texto});

Esta es una manera de escribir varias propiedades dentro del paréntesis. La forma de hacerlo es la siguiente: dentro del paréntesis ponemos unas llaves, y dentro de estas ponemos las parejas "propiedad":"valor". Los dos elementos de la pareja van separados por el signo de dos puntos. Las parejas se separan entre sí por comas.

Por lo tanto el código anterior es lo mismo que si pusiéramos lo siguiente:

img1.set("src",url);
img1.set("width","100%");
img1.set("alt",texto);
img1.set("title",texto);

Está claro que se ahorra tiempo y espacio al escribir el código de manera abreviada con:

img1.set({"src":url, "width":"100%", "alt":texto, "title":texto});






Seguimos en la siguiente página viendo métodos para manipular el dom:

Métodos del DOM



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