informaticaPC

Tutorial de JQuery

Spinner

Spinner

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>

Ejemplo

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.
Más información

Vea también: [ Spinner ] - [ Spinner (ejemplo) ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso