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: 41
Visitas el mes pasado: 62
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportació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.
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 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.
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.
Veremos aquí las opciones que podemos incluir en el tercer argumento.
mode : "horizontal",
range : [10,40],
offset : 5,
steps : 31,
initialStep : 15,
snap : true,
wheel : true,
Estos son los eventos que podemos aplicar a la clase Slider(). Aquí los veremos aplicados en forma de opciones (con el prefijo "on" delante: "onEvento"); pero también podemos aplicarlas al objeto que hemos instanciado ("objetoSlider.evento(function(){ ...});"), tal como ocurre con otros eventos de otras clases de mootools.
onChange : function(num){ $("texto").setStyle("font-size",num)},
Podemos utilizar también algunos métodos de Slider() para realizar algunas acciones:
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:
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:
En la siguiente página veremos otro efecto que consiste en reordenar listas arrastrando elementos de una lista de una posición a otra.
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