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

Visitas el mes pasado: 102

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

Métodos para funciones

imagen mootools

Introducción

Estos son una serie de métodos propios de mootols que se aplican a las funciones para conseguir que éstas tengan diversos comportamientos especiales.

Veamos ahora la sintaxis que podemos utilizar para aplicar un método a una función.

En función anónima : El método lo ponemos al final de la función, es decir, después de cerrar la llave } que indica las acciones que la función debe hacer. (por ejemplo el método bind):

function(){
//código a ejecutar por la función ...
}.bind(elemento);

Al acabar de escribir la función ponemos el método .bind() . Este método suele llevar un argumento que, como veremos más adelante, suele ser un elemento de la clase Element. El efecto que produce este método ocurrirá todas las veces que se ejecute la función.

Al llamar a la función : Tenemos por ejemplo una función normal:

function mifuncion(){
//código a ejecutar por la función ...
}

Cuando llamamos a la función, podemos añadirle un método para funciones:

mifunción.bind(elemento);

El efecto que se consigue con el método sólo ocurrirá si al llamar a la función le aplicamos el método.


El método .bind()

el método .bind() cambia el comportamiento por defecto de la variable this.

En una función referida a un evento, la variable this se refiere al elemento sobre el cual se produce el evento. Mediante .bind() podemos hacer que la variable this se refiera a otro elemento distinto. Para ello pasaremos el elemento al que se tenga que referir this, como argumento de .bind().

Supongamos que tenemos un botón button id="boton1" con el cual queremos modificar un elemento con id="capa1". Si escribimos el siguiente código:

$("boton1").addEvent("click",function(){
this.setStyle("backgroundColor","red");
});

Conseguimos que al pulsar el botón cambie el color de fondo del propio botón. Sin embargo, si lo que queremos es que cambie el color de fondo del elemento id="capa1", entonces añadiremos el método bind() :

$("boton1").addEvent("click",function(){
this.setStyle("backgroundColor","red");
}.bind($("capa1")));

Hemos cambiado así el valor de this, el cual se referirá ahora al elemento con id="capa1".


El método delay

El método .delay() retrasa la ejecución de la función la cantidad de milisegundos indicada en el argumento:

El siguiente botón abre una ventana de alerta tres segundos después de haberlo pulsado:

El código del botón el el siguiente:

<button onclick="retraso.delay(3000)">Alerta con retraso</button>

Y la función que controla el evento onclick es esta:

function retraso(){
alert("Alerta tras tres segundos");{
}

Para que el método se ejecute al pulsar el botón la función debe estar fuera de la estructura "domready", ya que si no el evento se ejecutaría a los tres segundos de haberse cargado la página. Por esta misma razón debemos usar el atributo onclick en el html para llamar al método, ya que si usamos un método addEvent() para ejecutar el evento, éste debe estar dentro del "domready", lo cual provoca que el evento, al tener el método delay, se ejecute al cargarse la página.


Método periodical()

El método periodical hace que la función se ejecute a intervalos regulares de tiempo, Como argumento pasamos el número de milisegundos que pasa entre cada intervalo.

seg=0;
function segundos() {
$("ver1").set("html","Contados "+seg+" segundos");
seg++;
}

segundos.periodical(1000)

En este ejemplo construimos primero una función que indicará los segundos transcurridos. Cuando llamamos a la función, le aplicamos el método periodical con un intervalo de 1000 milisegundos, lo cual hace que la función se repita cada segundo mostrando el valor de la variable seg, la cual aumenta en una unidad en cada repetición.

El método periodical tiene las mismas características que el método delay, es decir, que si ponemos la función dentro del "domready", ésta se ejecutará automáticamente al iniciarse la página, aunque la función forme parte de una llamada a un evento mediante addEvent. Esto nos obliga a llamar a la función desde el html mediante un atributo onclick.


método $clear()

Para parar la repetición periódica que se genera mediante el método periodical utilizamos el método $clear(). Como argumento debemos pasar una referencia a la función periodical, por lo que al crear la función periodical debemos ponerle una referencia:

contador1=segundos.periodical(1000)

Luego, cuando queramos parar el contador anterior, llamamos al método $clear:

$clear(contador1);

El método $clear() sirve también para parar la función delay() antes de que pase el tiempo marcado para su ejecución. La sintaxis es la misma que para periodical. En este caso el método clear() simplemente anula la ejecución de la función, siempre que no haya transcurrido el tiempo indicado en delay

El siguiente ejemplo lo hemos hecho utilizando los métodos periodical y $clear() para activar/desactivar el contador:

Contados 0 segundos

.. /..

En primer lugar hemos puesto el siguiente código html:

<p id="ver1">Contados 0 segundos</p>
<p><button id="boton1" onclick="cuenta=segundos.periodical(1000)">Iniciar / Continuar cuenta</button> .. /..
<button id="boton2" onclick="parar()" disabled=true >Parar cuenta</button></p>

Fíjate como en el onclick del primer botón hemos puesto el método periodical con una referencia (cuenta), para poder tomarla en el método $clear(). Ahora falta ver el código javascript/mootols, en el que tendremos las funciones segundos() y parar():

seg=0;
function segundos(){
  $("ver1").set("html","Contados "+seg+" segundos");
  seg++;
  $("boton1").disabled=true;
  $("boton2").disabled=false;
  }
function parar(){
  $clear(cuenta);
  $("boton1").disabled=false;
  $("boton2").disabled=true;
  }

Además de los métodos periodical y $clear, hemos puesto el código para que cada vez que pulsamos un botón, éste se deshabilita, y se habilita el otro. De esta manera sólo se puede pulsar el botón para la ejecución correcta.






En las siguientes páginas veremos cómo utilizar ajax con mootools:

Ajax: recibir archivos



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