informaticaPC

Tutorial de JQuery

Slider

Slider (desplazador)

El componente Slider de JQuery UI permite realizar la selección de un valor numérico. Sus principales propiedades son:

  • disabled: desactiva el componente.
  • max: valor máximo admitido.
  • min: valor mínimo permitido.
  • orientation: configura la orientación del componente ('vertical' u 'horizontal').
  • step: configura el incremento y decremento a aplicar cuando se utiliza el slider.
  • value: permite establecer y obtener el valor actual.

En cuanto a sus métodos, entre otros disponemos de:

  • destroy(): elimina el componente.
  • enable() / disable(): activar/desactivar el slider.
  • value(): devuelve o establece el valor actual.

Asimismo nos serán útiles los siguientes eventos:

  • change: se produce tras soltar el botón y antes de producirse el evento 'stop'.
  • slide: cuando se mueve el deslizador sin soltar el botón.
  • stop: se lanza después de soltar el botón y antes de producirse el evento 'change'.

El siguiente ejemplo te ayudará a comprender mejor su funcionamiento:

<!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 | Slider 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; }
        #slider { width:200px;margin:20px 0px 20px 100px; }
    </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()
        {
            // Mostrar el slider
            $("#slider").slider( {min:100,
                                          max:1000,
                                          value:300,
                                          slide:movimiento,
                                          change:cambiado,
                                          stop:parado
                                       });

            // Aplicar al slider un valor introducido
            $("#btnEstablecer").click(function()
            {
                var valor = $("#establecer").val();
                $("#slider").slider( {value : valor} );
            })
        });

        // ---------------

        // A cada movimiento del deslizador sin soltar el botón
        function movimiento( event, ui )
        {
            $("#log").append("slide ");

            $("#mover").attr("value", ui.value );
        }

        // ---------------

        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiado( event, ui )
        {
            $("#log").append("change ");

            $("#mostrar").attr("value", ui.value);
        }

        // ---------------

        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function parado( event, ui )
        {
            $("#log").append("stop ");
        }

    </script>
  </head>

  <body>

      <div id="log"> </div>

      <p>Usa el desplazador:</p>

      <div id="slider"></div>

      <label for="mostrar">Valor al mover:</label>
      <input type="text" id="mover" size="4" value="" readonly="readonly" />

      <label for="mostrar">Valor actual:</label>
      <input type="text" id="mostrar" size="4" value="" readonly="readonly" />

      <p>Introduce un número del 1 al 1000 y pulsa el botón:</p>

      <input type="text" id="establecer" size="4" value="500" />
      <input type="button" id="btnEstablecer" value="Aplicar" />

  </body>

</html>

Ejemplo

EXPLICACIÓN:

  • El Slider se crea a partir de un elemento HTML 'DIV', tras llamarse al método slider() después de cargarse la página web.
  • Observa cómo se disparan los diferentes eventos al cambiar el valor del componente.
Más información

Vea también: [ Slider ] - [ Slider (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