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

Visitas el mes pasado: 123

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

Utilizar MooTools

imagen mootools

Conectar MooTools

Lo primero que tenemos que hacer para trabajar con MooTools en una página es conectar la página con los archivos mootools que vayamos a usar. Para ello, en la cabecera, simplemente ponemos un link javascript al archivo. Como el archivo del núcleo o Core, mootools-core.js lo utilizaremos siempre, lo enlazamos con el link:

<script type="text/javascript" src="mootools-core.js"></script>

El archivo mootools-core.js tiene guardado el nucleo o "core" de mootools. Después si vamos a utilizar el archivo del "more" o plugins, éste lo enlazamos también a la página. Esto lo haremos también en la cabecera, y siempre después del enlace al "core":

<script type="text/javascript" src="mootools-more.js"></script>

En esta primera parte del manual utilizaremos sólamente el archivo "core", dejando para la segunda parte la utilización del archivo "more".


La estructura domready

En javascript hay multitud de operaciones que necesitan que el documento esté totalmente cargado para realizarlas. Todas las referencias a elementos de la página deben hacerse cuando el documento ya se ha cargado. Sin el uso de frameworks esto se consigue mediante el código:

window.onload = function () { ... }

Si usamos mootools este código cambia, pondremos lo siguiente:

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

Dentro de esta estructura añadiremos el código que tiene que escribirse una vez cargada la página, cualquier referencia a elementos de la página o variación que hagamos de ellos debe escribirse dentro de este código.


Elementos del dom:

Una de las tareas más comunes con javascript es localizar elementos en la página. Esto lo hacemos normalmente con el objeto document.getElementById() cuando el elemento lleva un atributo "id". Si no es así recurrimos a otra serie de métodos del dom, bastante largos de escribir y difíciles de recordar.

Mootools simplifica esta tarea. Crea para ello una clase de objetos "Element", en la que guarda todos los elementos del dom (con etiqueta) de la página. Accedemos a estos elementos de la siguiente manera:

Para los elementos del dom que tienen un atributo "id" la forma de localizarlos es la siguiente.

elemento=$("nombre_id");

Es decir, se sustituye el código document.getElementById por el signo dolar $. Dentro del paréntesis pasaremos como argumento el nombre que le hayamos puesto al "id" del elemento.

Para localizar una serie de elementos o elementos que no tengan un "id" utilizaremos el signo de doble dolar ($$). Como argumento pasaremos el selector CSS que necesitamos para seleccionar los elementos. Por ejemplo:

elementos=$$("h2");

En este método del objeto "Element" de mootools podemos pasar como argumento cualquier selector de CSS, tanto simple como compuesto. El resultado será un array con todos los elementos seleccionados.

Los elementos que obtenemos mediante estos métodos ($ y $$) son objetos de la clase Element de mootools, y por lo tanto admiten los métodos y propiedades propias de esta clase, lo cual veremos más adelante.

Veamos algunos ejemplos de utilización del método $$:

parrafos_menu=$$("#menu p");

En este ejemplo se seleccionan los párrafos del "id" menú.

datos=$$(".dato");

Aquí seleccionamos todos los elementos que tengan un atributo class="dato".

mielemento=$$("#mielemento");

Aquí seleccionamos el elemento con id="mielemento". Aunque sólo hay un elemento este quedará también dentro de un array (un array de un sólo elemento), por lo que para estos casos es aconsejable utilizar el método

mielemento=$("mielemento");

Con el método $$ obtenemos siempre un array que contiene los elementos seleccionados. Para extraer los elementos del array procederemos a la forma habitual de javascript, es decir mediante un bucle "foreach" o un bucle "for" en el que hemos calculado el número de elementos mediante la propiedad .length.

También podemos usar el método "each" de mootools, el cual veremos más adelante.


Ejemplo con mootools

Haremos aquí un pequeño ejemplo de utilización de mootools. En un elemento vacío incorporaremos otros elementos mediante mootools.

Para ello creamos primero el elemento vacío el cual tiene el siguiente código HTML:

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

En el código CSS añadimos la siguiente línea para poder verlo como el de la derecha:

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

A continuación ponemos dos botones de control, los botones sirven para ver u ocultar el texto


.. // ..

El código HTML de los botones es el siguiente:

<p><input type="button" value="Ver" onclick="ver()"/> .. // ..
<input type="button" value="Ocultar" onclick="ocultar()"/></p>

Ahora para que funcione el script introduciremos el siguiente código en javascript-Mootols:

window.addEvent("domready",function() {
capa1=$("capa1");
});
function ver(){
      texto="<h2>Título</h2><p>Párrafo 1</p><p>Parrafo 2</p>";
      capa1.set("html",texto);
      }
function ocultar(){
      texto="";
      capa1.set("html",texto);
      }

Veamos cómo está formado este código. En primer lugar creamos una estructura "domready", dentro de ella localizamos con mootools el elemento con id="capa1". Este lo guardamos en una variable.

Después creamos las dos funciones asociadas a los botones de control. Dentro de cada una de ellas ponemos en una variable el texto que debe verse al pulsar el botón. Después utilizamos el método "set" de mootools : .set("html",texto);. El primer argumento ("html") indica que cambiaremos el contenido de la etiqueta. El segundo es el nuevo contenido que pondremos. Veremos éste y otros métodos en páginas posteriores de este manual.

Por supuesto, para que el script funcione la página tiene que tener el enlace al archivo mootols. En este caso es suficiente con enlazar al archivo del nucleo o Core de MooTools.






Una vez localizados los elementos del dom en la página, el siguiente paso es saber manipularlos. Esto lo veremos en la siguiente página.

Métodos get y set



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