Elemento Slider de jQuery Mobile

Com jQuery Mobile obtemos elegantes sliders e interruptores, com os quais podemos enriquecer visualmente nossas aplicações móveis.

Por Dairo Galeano-Tradução CRV


Publicado em: 13/8/12
Valorize este artigo:
Até agora no Manual de jQuery Mobile aprendemos a implementar variados componentes de interface de usuário, que podem ser criados através do atributo data-role. Como se terá comprovado, a partir de diversos atributos com o prefixo "data-" se podem otimizar elementos HTML simples, e mediante jQuery Mobile convertê-los em elegantes widgets. O melhor é que tudo se realiza de uma forma automatizada e sem necessidade de programação.

Como todos sabemos, HTML também possui diversos componentes de interface gráfica de usuário, que geralmente vêm incluídos dentro dos formulários. Ademais, agora, com a versão cinco da linguagem da web, dispomos de alguns elementos de formulário adicionais, que em geral estendem os INPUT já conhecidos. Trata-se de uma nova gama de types diferentes, ou seja, diversos tipos de campos INPUT, e dentro destes, aparecem os sliders.

Os sliders são uma interface gráfica de usuário que nos permitem por meio de um elemento que desliza, ajustar um valor entre uma categoria. Agora, talvez muitos de vocês se perguntem: Se podemos criar sliders com HTML5, para que necessitamos jQuery Mobile?

Se bem que com HTML 5 se podem criar sliders, estes contam com a forma ou aparência convencional, assim que se o que queremos é romper um pouco o esquema devemos recorrer a jQuery Mobile, para a criação de sliders mais sofisticados, com novas funcionalidades e capacidades de personalização. Mas se isso parece pouco, talvez acabe de convencer esta possibilidade, de expandir os elementos slider, se você sabe que realmente não necessita configurar praticamente nada em jQuery Mobile, já que a filosofia do framework é realizar mais coisas com menos esforço.

Modos de criação dos sliders com jQuery Mobile

Para a criação de sliders com jQuery Mobile, dispomos de opções, com uma estrutura muito simples, ademais de outras opções de configuração visual.

Arranquemos com a criação mais simples, onde só devemos criar elementos INPUT, já que jQuery Mobile se encarregará de lhes aplicar o tema gráfico correspondente, dependendo do valor que possua seu atributo type. Assim, para criar um slider só devemos escrever o seguinte código.

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

Como você pode ver, é só um elemento INPUT (já que o label realmente não faz parte do slider, simplesmente coloca um texto ao lado). Será jQuery Mobile que assumirá o trabalho de acrescentar o CSS correspondente para que funcione de maneira eficiente.

Nota: Para aqueles que não estão relacionados com este novo INPUT de HTML5, cabe comentar que as novas especificações da linguagem da web contêm 13 novos tipos de campos INPUT.

Cada um destes novos INPUT são importantes, sobretudo, para dispositivos sensoriais, já que dependendo do tipo de input aparecerá um teclado virtual acorde para preencher o campo. Poderemos encontrar, entre outros, campos específicos para:

  • Input type=”tel”: Formato para números de telefones.
  • Input type=”search”: Formato para campos de busca.
  • Input type=”url”: Formato para escrever endereços web.
  • Input type=”number”: Formato para escrever valores numéricos.
  • Input type=”email”: Formato para endereços de email.
  • Input type=”range”: Com este trabalhamos no presente artigo.
  • Input type=”datetime”: Útil para datas e horas.

Para informação de vocês, estamos preparando documentação sobre este assunto que logo aparecerá em CriarWeb.com.

A etiqueta HTML, como você viu, não tem código Javascript em nenhuma parte. Quer dizer, jQuery Mobile implementa tudo sem que você precise se preocupar com nada. No entanto, você deve ter em conta que o slider se crie a partir de um elemento INPUT, pois, se não fizer isto , o funcionamento do slider não estaria garantido.

As outras opções que temos à disposição dos sliders estão relacionadas com os aspectos visuais do widget. Como já devemos saber, dispomos do atributo data-theme para modificar a cor dos componentes. Adicionalmente, os slider contam também com data-track-theme.

Assim que se o que queremos é um slider com variedade de cores, tanto no controle que se desliza como na rota por onde passa o controle, necessitaríamos um código como o seguinte:

<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 pode notar agora mudamos os atributos antes mencionados, o que não requer maior explicação se você seguiu oManual de jQuery Mobile até este ponto.

Fazer botões de opções binárias ou interruptores

Existem uns componentes de interface gráfica que são parecidos aos slider, mas que só têm dois estados. Se denominam interruptores e talvez possamos tê-los visto em funcionamento em aplicações para dispositivos móveis. Com um interruptor temos duas opções: podemos ativá-los desativar. Com isso podemos configurar alguma função no dispositivo ou na aplicação web que estejamos desenvolvendo.

Normalmente criaremos um slider a partir de uma etiqueta INPUT, tal como se explicou há uns instantes. Não obstante, quando se trata de criar interruptores, se utiliza um elemento SELECT, embora o valor de data-roler continue sendo "slider". Vejamos um código de exemplo com o qual podemos criar um destes interruptores.

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

Como se pode ver, é um elemento SELECT com o atributo data-role, ao qual atribuímos o valor "slider". Ademais, cabe observar também nos dois elementos OPTION, que expressam os distintos estados do interruptor. Para indicar a jQuery Mobile quando está aceso e quando está apagado devemos configurar os value dos OPTION. Você pode ver no código de exemplo os valores no atributo value, "off" no primeiro e "on" no segundo.

Nota: Si haces más OPTION de los debidos, jQuery Mobile creara el slider de todas formas, pero no será nada agradable el resultado, obtendrás las tres opciones, pero enredadas. De igual forma, si no le das por ejemplo el valor al atributo value de la opción de encendido, el interruptor no funcionará.

À hora de criar um interruptor você também pode personalizá-lo, com os temas que dispomos no framework. Para esta tarefa dispomos do atributo data-theme, deixando a JQuery Mobile framework a tarefa de fazer a combinação de temas entre as duas opções.

Conclusão

Com o fim de obter componentes mais vistosos e uniformes, será o próprio framework quem se encarregará da configuração visual de cada um dos elementos INPUT que se implementem em modo de slider.

Portanto, nossa tarefa de codificação fica em bem menos. Não obstante, como de costume, deixamos o código de um exemplo completo, com tudo que foi explicado neste artigo.

<!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 Simples com 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">Selecionar uma de duas opcoes</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>

Lembre que você também pode ver o exemplo em uma página à parte, para comprovar seu funcionamento. Até a próxima.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato