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.