Desplazadores en jQuery
La última funcionalidad de jQuery que estudiaremos en este tema es la de poder realizar elementos desplazadores. Los desplazadores nos servirán para escoger una cantidad en el caso que se trate de un desplazador único (pj: número de habitaciones de una casa) o un rango de cantidades si contamos con dos desplazadores (pj: precio de un libro, entre 10 y 30 Euros).
Mediante el método slide() aplicado a un elemento del DOM creamos un desplazador: $("#idElmento").slide(options). Como se puede ver a este método se le pueden pasar diferentes opciones:
- range:[true|false] con valor true, nos indica que tendremos dos desplazadores (mínimo y máximo).
- start: callback que se ejecutara al empezar a mover el desplazador.
- stop: callback que se ejecutara cuando se termina de desplazar.
- change: callback que se lanza al modificar el valor del desplazador. min, max:** Son lo valores máximo, mínimo que el slider puede tomar.
- step: El intervalo entre valor y valor.
Cabe destacar que al igual que pasaba con los elementos droppables, las funciones callback que se lanzan de forma asíncrona al ocurrir un evento (pj: cambio el valor del desplazador, opción “change”) se recogerán los parámetros ev (evento) y ui (objeto especial user interface). En el caso especial del desplazador, el atributo ui.value nos devolverá el valor que toma el desplazador en el momento que se lanza la función callback.
Además de capturar el valor con ui.value, siempre podemos hacerlo mediante la opción 'values' seguido del número del desplazador (si es un desplazador con rango “range” -entre X e Y- tendrá dos desplazadores el 0 y el 1).
//devuelve el valor del primero
$("#min").html($("#desplaza").slider('values', 0));
//devuelve el valor del segundo
$("#max").html($("#desplaza").slider('values', 1));
En el siguiente código crearemos dos elementos desplazadores. El primero será simple (un solo desplazador), irá del valor 0 al 50 de 5 y 5. Al cambiar su valor se mostrará un alert con el valor indicado. En el segundo, se optará por un desplazador con rango. Tendrá valores de 100 a 10.000 y se moverá de 10 en 10. Además cada vez que cambie de valor actualizaremos dos etiquetas donde se mostrará el valor máximo y el mínimo.
<html>
<head>
<link type="text/css" href="temaVerde.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#desplazador").slider({
min:0, max:50, step:5,
change: function(ev,iu){
/*aqui tenemos el valor del desplazador*/
alert(iu.value);
}});
});
$(document).ready(function(){
$("#desplazador2").slider({
min:100, max:10000,
step:10, range:true, change:actualizarValores
});
});
function actualizarValores()
{
$("#minimo").html($("#desplazador2").slider('values', 0));
$("#maximo").html($("#desplazador2").slider('values', 1));
}
</script>
</head>
<body>
<div id='desplazador' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>
</div>
<div id='desplazador2' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>
<div class='ui-slider-handle'></div>
</div>
<div>MIN:<div id="minimo">100</div></div>
<div>MAX:<div id="maximo">100</div></div>
</body>
</html>
