[jQuery] Nuevas características de jQuery UI 1.9 – Parte II: Spinner

Posted on


Hola, siguiendo con los post sobre lo nuevo en jQuery UI 1.9, en este artículo vamos a revisar el widget spinner.

El spinner lo que hace es convertir un campo de texto en un NumericDropDown, un control con dos flechas para poder avanzar o retroceder valores numéricos.

En este ejemplo vamos a tener tres diferentes spinner:

· El primero con las opciones por default, el cual aumenta/disminuye su valor de 1 en 1.

· El segundo que aumenta/disminuye los valores de 5 en 5.

· El tercero q maneja valores decimales y el aumento/disminución del valor es cada 0.1

Lo primero vamos a crear tres controles para cada uno de los spinner:

   1:  <label>Seleccione [entero]:</label>
   2:  <input id="txtEntero" type="text" value="0" />
   3:  <label>Seleccione [aumento de 5]:</label>
   4:  <input id="txtEntero5" type="text" value="0" />
   5:  <label>Seleccione [decimal]:</label>
   6:  <input id="txtDecimal" type="text" value="0.0" />

Luego las referencias a los archivos js necesarios:

   1:  <link rel="Stylesheet" href="css/jquery.ui.all.css" />
   2:  <script src="js/jquery-1.6.2.js"></script>
   3:  <script src="js/ui/jquery.ui.core.js"></script>
   4:  <script src="js/ui/jquery.ui.widget.js"></script>
   5:  <script src="js/ui/jquery.ui.button.js"></script>
   6:  <script src="js/ui/jquery.ui.spinner.js"></script>

Y finalmente el código jQuery:

   1:  $(function(){
   2:      $("#txtEntero").spinner();
   3:      $("#txtEntero5").spinner({
   4:          step: 5
   5:      });
   6:      $("#txtDecimal").spinner({
   7:          step: 0.1
   8:      });
   9:  })

La diferencia entre cada uno de los ejemplos es que se define la propiedad step, la cual permite establecer el valor del incremento del spinner, para poder manejar decimales simplemente definimos el step del aumento/decremento con un valor decimal.

Finalmente vamos a tener algo como:

Imagen1

Como siempre les dejo el código con el ejemplo y nos vemos en el próximo post con más novedades de jQuery UI 1.9

Descarga el ejemplo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s