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

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

Visitas el mes pasado: 101

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
docs/more/ página oficial mootools
mootools.net

Donativos

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




MooTools3 (IV)

Control deslizante

imagen mootools

Introducción

Un control deslizante consiste en un elemento con forma de barra, con otro elemento en forma de botón dentro. El botón puede arrastrarse dentro de la barra. Al arrastrar el botón, podemos conseguir efectos en otros elementos, cambiando alguna de las propiedades CSS progresivamente a medida que arrastramos el botón.

Garfield

Vemos aquí a la izquierda un ejemplo de control deslizante. Debajo de la imagen hay una barra con un botón para controlar la opacidad de la imagen.


La clase Slider()

La clase Slider de mootools es la que permite realizar este tipo de efecto de una manera sencilla.

En primer lugar debemos crear con HTML y CSS la forma de una barra de desplazamiento con un botón dentro. En este ejemplo hemos puesto el siguiente código:

<div id="caja0">
<img id="img0" src="objetos/garfield.gif" alt="Garfield">
<div id="barra0">
  <div id="boton0"></div>
</div>
<div id="texto0"></div>
</div>

Creamos primero la caja que va a contener todo, y dentro de ella ponemos la imagen, la barra de desplazamiento, y el texto con la información. El elemento que será el botón que se desplaza esta dentro del elemento que será la barra.

Ahora con CSS damos forma a la barra de desplazamiento y al botón entre otras cosas:

#caja0 { width: 30%; border: 1px solid black; margin: 1em 1em 1em 3em; 
         padding: 5px; float: left; }
#img0 { width: 100%; }
#barra0 { width: 100%; height: 15px; background-color: silver; }
#boton0 { width: 15px; height: 15px; background-color: black; cursor: pointer; }
#texto0 { font-size: 14px; text-align: left;  }

Para crear la barra debemos dar tamaño al elemento de forma que tenga forma de barra, aquí, como al barra es horizontal, damos mucha anchura y poca altura. También ponemos la anchura y altura del botón de forma que sea cuadrado, y quepa dentro de la barra de desplazamiento.

El código de javascript mootols convierte este elemento estático en algo dinámico. Vemos aquí el código del ejemplo anterior. Aunque en principio no lo entendamos, explicaremos después las posibilidades de la clase Slider (opciones, eventos) que aplicamos aquí:

sd0=new Slider($("barra0"),$("boton0"),{
  initialStep: 50,
  onChange: function(num){
     op=num/100;
     $("img0").setStyle("opacity",op);
     $("texto0").set("html","opacidad : "+num+"%:")
     }
  });

Como es probable que no hayamos entendido poco o nada de este código, explicamos a continuación cómo funciona la clase Slider, con la cual hacemos este tipo de efecto.


Instanciar el objeto

Como con la mayoría de clases de mootools, lo primero que tenemos que hacer es instanciar un objeto, es decir crear un nuevo objeto de la clase Slider(). Al crearlo pondremos tres argumentos, el primero será el elemento que hace de barra deslizante. El segundo el elemento que hace de botón movible, y el tercero una serie de opciones, entre las que podemos incluir también algunos eventos.

miSlider=new Slider($("barra"),$("boton"),{[opciones]});

el tercer elemento (opciones) no es obligatorio, sin embargo tenemos que ponerlo si queremos que la barra de control controle realmente algo.


opciones

Veremos aquí las opciones que podemos incluir en el tercer argumento.


Métodos

Podemos utilizar también algunos métodos de Slider() para realizar algunas acciones:


Ejemplo de controles deslizantes

Veremos aquí un ejemplo en el mediante controles deslizantes el usuario puede cambiar el color de un elemento. Ponemos un control deslizante para cada color básico, y además indicamos también el valor del color para CSS en decimal y en hexadecimal.

El ejemplo se muestra en una página aparte en el siguiente enlace:

Ejemplo de control deslizante


Si quieres ver cómo está hecha esta página o simplemente quieres copiar el código para hacer otra igual, puedes ver el código en el siguiente enlace:

Ejemplo de control deslizante






En la siguiente página veremos otro efecto que consiste en reordenar listas arrastrando elementos de una lista de una posición a otra.

Reordenar listas



Manual de Mootools (III Avanzado)

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