Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

MooTools3 (IV)

Control deslizante

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.

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.

• mode : Sus posibles valores son las cadenas "horizontal" (por defecto) o "vertical" e indica la posición de la barra de desplazamiento, y también la dirección en la que se desplazará el botón.

  mode : "horizontal",

• range : Como valor pasaremos un array con dos elementos que serán dos números [min,max]. Estos dos numeros indican el valor mínimo y máximo que podemos dar al mover el botón de la barra de desplazaminto (valor del control). Por defecto estos valores son 0 y 100 [0,100].

  range : [10,40],

• offset : Como valor pondremos un número entero. Éste indica la distancia en pixels que hay entre el borde del elemento barra y el del elemento botón en su desplazamiento permitido. Por defecto este es 0, por lo que estos coincidirán. Con números positivos el margen de desplazamiento del botón es más pequeño que la barra, con números negativos, el desplazamiento del botón sobrepasa a la barra.

  offset : 5,

• steps : Indica el número de pasos que tiene el recorrido del botón en la barra. Como valor pasamos un número entero positivo (por defecto es 100). Al recorrer la barra de control con el botón el valor del control cambiará con cada paso.

  steps : 31,

• initialStep : Como valor pondremos un número entero positivo que sea menor o igual que el número de pasos. Indica en qué paso se encontrará el botón cuando se cargue el elemento. Este por defecto es 0, por lo que por defecto el botón está a la izquierda (horizontal) o arriba (vertical).

  initialStep : 15,

• snap : Valores booleanos false (valor por defecto) o true. Con true redondea el valor de control a un número entero cuando no coinciden la cantidad de números del rango con la cantidad de pasos. A veces puede provocar que el valor máximo del rango no lo admita, por lo que se debe en este caso alargar en uno o varios enteros el máximo valor del rango.

  snap : true,

• wheel : Valores booleanos false (valor por defecto) o true. El valor true activa el movimiento de la rueda del ratón, la cual al moverla con el cursor dentro de la barra, desplaza el botón.

  wheel : true,




Eventos

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){ ...}, Este evento se produce cada vez que cambia la posición del botón (cada vez que recorre un paso). La función asociada recibe un argumento que será el valor del control. Es dentro de la función donde pondremos el elemento que queremos controlar, y los valores que queremos cambiar, que vienen dados por el valor de control num.

  onChange : function(num){ $("texto").setStyle("font-size",num)},

• onComplete : function(num){ ...}, Este evento funciona igual que el anterior, pero sólo se activa cuando el botón deja de ser arrastrado, es decir, al soltar el botón de control.

• onTick : function(num){ ...}, Este evento funciona como los anteriores, pero sólo se activa cuando se hace click con el ratón dentro de la barra de desplazamiento.

Métodos

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

• miSlider.set(num); : El método set mueve el botón a la posición indicada en el argumento.
• miSlider.detach(); : El método detach deshabilita el efecto del botón de control, La barra de control no puede ser utilizada.
• miSlider.attach(); : El método attach habilita el efecto del botón de control, cuando éste estaba deshabilitado. El control puede volver a usarse.
• miSlider.autosize(); : El método autosize vuelve a ajustar el rango con el número de pasos y el tamaño de la barra. Es útil cuando se ha cambiado de forma dinámica alguno de éstos parámetros.

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

Página creada por ANYELGUTI.

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