El componente Spinner al igual que Slider nos permite seleccionar un valor numérico. Sus propiedades más importantes son:
- disabled: desactiva el componente.
- max: valor máximo admitido.
- min: valor mínimo permitido.
- step: configura el incremento y decremento a aplicar cuando se utiliza el slider.
Entre otros, algunos métodos útiles son:
- destroy(): elimina el componente.
- enable() / disable(): activar/desactivar el slider.
- value(): devuelve o establece el valor actual.
En cuanto a eventos tenemos:
- change: se produce cuando el componente pierde el foco si valor fue modificado.
- spin: se lanza cuando se cambia de valor haciendo clic en las flechas.
- stop: tiene lugar después de soltar el botón (se ve mejor si se mantuvo presionado).
A continuación te mostramos un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Spinner con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Crear el spinner
$("#spinner").spinner( {min:0,
max:100,
step:5,
spin:movimiento,
change:cambiado,
stop:parado
});
// Mostrar el valor actual en el spinner
$("#btnObtener").click( function() {
var valor = $("#spinner").spinner("value");
$("#actual").attr("value", valor);
});
// Establecer un valor el spinner
$("#btnEstablecer").click( function() {
var valor = $("#establecer").val();
$("#spinner").spinner("value", valor);
});
});
// ---------------
// Cada vez que se cambia el valor haciendo clic en las flechas
function movimiento( event, ui )
{
$("#log").append("spin ");
}
// ---------------
// Ojo, cuando el componente pierde el foco si valor fue modificado
function cambiado( event, ui )
{
$("#log").append("change ");
}
// ---------------
// Justo después de soltar el botón (se ve mejor si se mantuvo presionado)
function parado( event, ui )
{
$("#log").append("stop ");
}
</script>
</head>
<body>
<div id="log"> </div>
<label for="spinner">Selecciona un valor:</label>
<input type="text" id="spinner" size="4" /><p />
<label for="actual">Valor actual:</label>
<input type="text" id="actual" size="4" readonly="readonly" />
<input type="button" id="btnObtener" value="Obtener" />
<p>Escribe un número entre 1 y 100 y pulsa el botón:</p>
<label for="establecer">Establecer valor:</label>
<input type="text" id="establecer" size="4" value="50" />
<input type="button" id="btnEstablecer" value="Establecer" />
</body>
</html>
EXPLICACIÓN:
- La creación del componente se realiza a partir de un cuadro de texto, llamándose al método spinner() tras haber finalizado la carga de la página.
- Practica con el ejemplo anterior y fíjate en los diferentes eventos que se producen cuando se modifica su valor.
Vea también: [ Spinner ] - [ Spinner (ejemplo) ]
