Hasta ahora en el Manual de jQuery Mobile hemos aprendido a implementar variados componentes de interfaz de usuario, que se pueden crear a través del atributo data-role. Como se habrá podido comprobar, a partir de diversos atributos con el prefino "data-" se pueden optimizar elementos HTML sencillos, y mediante jQuery Mobile convertirlos en elegantes widgets. Lo mejor es que todo se realiza de una forma automatizada y sin necesidad de programación.

Como todos sabemos, también HTML posee de diversos componentes de interfaz gráfica de usuario, que por lo general vienen incluidos dentro de los formularios. Además, ahora, con la versión cinco del lenguaje de la web, disponemos de algunos elementos de formulario adicionales, que en general extienden los INPUT de toda la vida. Se trata de una nueva gama de types diferentes, es decir, diversos tipos de campos INPUT, y dentro de éstos, aparecen los sliders.

Los sliders son una interfaz gráfica de usuario que nos permiten por medio de un elemento deslizable, ajustar un valor entre un rango. Ahora bien, quizás muchos de vosotros os preguntaréis ¿Si podemos crear sliders con HTML5, para que necesitamos a jQuery Mobile?

Si bien con HTML 5 se pueden crear sliders, estos cuentan con la forma o apariencia convencional, así que si lo que queremos es romper un poco el esquema debemos recurrir a jQuery Mobile, para la creación de sliders más sofisticados, con nuevas funcionalidades y capacidades de personalización. Por si esto te parece poco, quizás acabe de convencerte esta posibilidad, de expandir los elementos slider, si sabes que realmente no necesitas configurar practivamente nada en jQuery Mobile, ya que la filosofía del framework es realizar más cosas con menos esfuerzo.

Modos de creación de los sliders con jQuery Mobile

Para la creación de sliders con jQuery Mobile, disponemos de opciones, con una estructura muy sencilla, además de otras opciones de configuración visual.

Arranquemos con la creación más sencilla, en donde solo debemos crear elementos INPUT, ya que jQuery Mobile se encargará de aplicarles el tema gráfico correspondiente, dependiendo del valor que posea su atributo type. Así, para crear un slider solo debemos escribir el siguiente código.

<label for="slider">Slider Simple: </label>
<input type="range" name="slider" id="slider" max="100" min="1" value="25" />

Como puedes ver, es solo un elemento INPUT (ya que el label realmente no forma parte del slider, simplemente coloca un texto al lado). Será jQuery Mobile el que se tome el trabajo de agregar el CSS correspondiente para que funcione de manera eficiente.

La etiqueta HTML, como has visto, no tiene código Javascript por ninguna parte. Es decir, jQuery Mobile lo implementa todo sin que debas preocuparte de nada. Sin embargo, debes tener en cuenta que el slider se cree a partir de un elemento INPUT, pues, de no hacer esto, el funcionamiento del slider no estaría garantizado.

Las otras opciones que tenemos a disposición de los sliders están relacionadas con los aspectos visuales del widget. Como ya podemos saber, disponemos del atributo data-theme para modificar el color de los componentes. Adicionalmente, los slider cuentan también con data-track-theme.

Así que si lo que queremos es un slider con variedad de colores tanto en el control que se desliza como en la ruta por donde pasa el control, necesitaríamos un código como el siguiente:

<label for="slider1">Slider Simple con temas: </label>
<input type="range" name="slider1" id="slider1" max="100" min="1" value="40" data-theme="b" data-track-theme="a"/>

Como se puede notar ahora hemos cambiado los atributos antes mencionados, lo cual no requiere mayor explicación si has seguido el Manual de jQuery Mobile hasta este punto.

Hacer botones de opciones binarias o interruptores

Existen unos componentes de interfaz gráfica que son parecidos a los slider, pero que solo tienen dos estados. Se denominan interruptores y quizás podamos haberlos visto en funcionamiento en aplicaciones para dispositivos móviles. Con un interruptor tenemos dos opciones: los podemos activar o desactivar. Con ello podemos configurar alguna función en el dispositivo o en la aplicación web que estemos desarrollando.

Normalmente un slider lo crearemos a partir de una etiqueta INPUT, tal como se explicó hace unos instantes. No obstante, cuando se trata de crear interruptores, se utiliza un elemento SELECT, aunque el valor de data-roler continua siendo "slider". Veamos un código de ejemplo con el cual podemos crear uno de estos interruptores.

<select name="slider" id="flip1" data-role="slider">
   <option value="off">Off</option>
   <option value="on">On</option>
</select>

Como se puede ver, es un elemento SELECT con el atributo data-role, al cual asignamos el valor "slider". Además, cabe fijarse también en los dos elementos OPTION, que expresan los distintos estados del interruptor. Para indicar a jQuery Mobile cuando está encendido y cuando está apagado debemos configurar los value de los OPTION. Puedes ver en el código de ejemplo los valores en el atributo value, "off" en el primero y "on" en el segundo.

A la hora de crea un interruptor también lo puedes personalizar, con los temas que disponemos en el framework. Para esta tarea disponemos del atributo data-theme, dejando a JQuery Mobile framework la tarea de hacer la combinación de temas entre las dos opciones.

Conclusión

Con el fin de obtener componentes mas vistosos y uniformes, será el propio framework quien se encargue que la configuración visual de cada uno de los elementos INPUT que se implementen en modo de slider.

Por tanto, nuestra tarea de codificación se queda en más bien poco. No obstante, como de costumbre, dejamos el código de un ejemplo completo, con todo lo explicado en este articulo.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Sliders con jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />   
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>   
</head>
<body>
<div data-role="page">
   <div data-role="header">
    <h1>Sliders</h1>
   </div>
   <div data-role="content">
    <div data-role="content">
      <form action="#" method="get">
       <div data-role="fieldcontain">
       <label for="slider">Slider Simple: </label>
       <input type="range" name="slider" id="slider" max="100" min="1" value="25" />
       <br>
       <label for="slider1">Slider Simple con temas: </label>
       <input type="range" name="slider1" id="slider1" max="100" min="1" value="40" data-theme="b" data-track-theme="a"/>
    <br>

<label for="flip1">Seleccionar una de dos opciones</label>
<select name="slider" id="flip1" data-role="slider">
    <option value="off">Off</option>
    <option value="o">On</option>
</select>
       </div>
      </form>
</div>
<div data-role="footer">
<h3>Sliders</h3>
</div>
</div>
</div>
</body>
</html>

Recuerda que también puedes ver el ejemplo en una página aparte, para comprobar su funcionamiento. Hasta una próxima entrega.