script.aculo.us guía rápida – Parte 4

Slider Control

Veremos ahora lo relacionado con el control Slider del script.aculo.us, sí, ese control deslizante al cual podemos darle muchos usos. Veamos su sintaxis y algunas de sus principales opciones:

new Control.Slider('id_deslizador','id_pista', [opciones]); 

Donde opciones (las principales por supuesto) :

• axis: Determina la dirección del control Slider. Por defecto es horizontal.
• range: Determina el valor minimo y máximo. Uso: $R(2,10). En caso de no especificar esta opción, 0 y 1 son valores por defecto.
• values: Un array donde determinamos los elementos que serán recorridos con el Slider. Ej. values: [2,4,6,8,10], esto hará que cuando nos deslicemos por el control, forzadamente cambiará a estos valores.

Las demas opciones puede consultarlos en el wiki de script.aculo.us.

Funciones de retorno (Callback)

• onSlide: Nos permite ver nuestra ubicación entre el rango mientras nos desplazamos por el Slider.
• onChange: Nos permite ver nuestra ubicación cuando terminamos de desplazarnos.

Ejemplo

Incluyamos las librerías principales:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

Crearemos nuestra contenedor pista y deslizador, además de un contenedor para mostrar un mensaje.

<div id="pista" style="width:200px;background-color:green;height:10px;">
 <div id="deslizador" style="width:5px;height:15px;background-color:red;cursor:move;">
 </div>
</div>
<div id="mensaje"></div>

Y ahora el código JavaScript que hará el efecto deseado.

<script type="text/javascript" language="javascript">
 new Control.Slider('deslizador','pista',{range:$R(2,10), values: [2,3,4,5,6,7,8,9,10],
  onSlide:function(v){
   $('mensaje').innerHTML='deslizando por: '+v
  },
  onChange:function(v){
   $('mensaje').innerHTML='cambio a '+v}
  });
</script>

[Ver Ejemplo] [Descargar Ejemplo]

Nada del otro mundo. Y ahora se me ha ocurrido que podemos usar esto para la páginacion de consultas MySQL junto con PHP y Ajax. ¿Les parece un buena idea? Avisarme si alguien consigue hacerlo.