Olá Pessoal, esta é a quarta parte do pequeno tutorial sobre Jquery Mobile.
Como vimos adiantando ao longo dos artigos anteriores do Manual de jQuery Mobile, este framework oferece uma ampla gama de widgets ou componentes de interface gráfica de usuário (GUI). Ditos componentes vão mais além dos convencionais oferecidos em HTML 5 e embora seja verdade que tiveram grandes melhorias em relação às versões anteriores da linguagem da web, são ainda ultrapassados em qualidade e variedade pelos que podemos criar através de jQuery Mobile.
É por isso que jQuery Mobile oferece uma alternativa muito divertida de enriquecer visualmente nossas aplicações web para móveis, através de toda uma quantidade de formas e efeitos que vêm pré-desenhados no framework. O melhor é que podemos acessar a tudo isto de maneira muito fácil, o que nos permitirá criar com extraordinária simplicidade GUIs visualmente mais atrativas.
Neste artigo, e em outros que publicaremos em breve, estudaremos as formas de criar, personalizar e trabalhar com componentes de interface gráfica de usuário. De momento iniciaremos com a criação de botões, que são uns dos elementos mais usados em qualquer aplicação, quer seja para a web ou para área de trabalho. Veremos que jQuery Mobile nos oferece uma alternativa para criar botões de estética atraente e fácil de implementar em nossos projetos, aplicações web ou sites para móveis.
Um Botão simples de jQuery Mobile
jQuery Mobile oferece uma maneira simples de criar botões, a partir de uma serie de propriedades ou atributos que vêm predeterminados no framework. O Mais destacado é que, para conseguir nosso objetivo, só necessitamos poucas linhas de código e ,ademais, tudo em HTML.
Nota: A possibilidade de configurar elementos de interface gráfica a través de HTML é uma das características de jQuery Mobile e é uma grande diferença com respeito às bibliotecas jQuery UI, onde requeríamos de Javascript para criar e mostrar nossos componentes de interface gráfica de usuário ou widgets. Embora valha a pena dizer que tais scripts não eram muito difíceis de conceber ou criar, pois tudo o que tem a ver com jQuery está desenhado para nos facilitar a vida.
Se recordarmos um pouco o que aprendemos aqui sobre jQuery UI para criar um botão, o que não era muito difícil, primeiro necessitávamos um código HTML como o seguinte:
<a href=”#” id =”botao” > Este é um botão simples JQUI</a>
É um simples link , que se referencia através do id_botão, mas que jQuery UI com ajuda de algo de javasScript convertia em um bonito botão. Tal script seria algo como o seguinte:
$(“#botao”).button();
Agora bem, no caso de jQuery Mobile não se requer criar scripts para implementar nossos botões. Isso é feito de forma direta em nosso documento ou código HTML. Consegue-se com código como o seguinte:
<a href=”#” id =”botao” data-role=”button” >Este é um botão simples JQM</a>
Como podemos ver foi muito fácil criar nosso botão. Só tivemos que atribuir o valor de “button” ao atributo data-role de nosso link, algo que podemos fazer sobre um botão criado através da etiqueta input o que seria algo como isto:
<input type=”button” data-role=”button” value=”Botao input”/>
Ou seja, que facilmente podemos fazê-lo de forma direta sobre nossos submit para enviar formulários a um servidor, o que nos ajudaria a sair do clássico e convencional botão HTML. Coseguimos isso com a seguinte linha de código:
<input type=”submit” data-role=”button” value=”Botão submit”/>
Modificar as propriedades por padrão dos botões de jQuery Mobile
Uma das coisas que acontecem com os botões é que, por padrão, ocupam toda a largura da tela, sem importar a resolução da mesma, porém em certos momentos não queremos fazer isso. Existe uma maneira muito simples de criar botões que se ajustem ao tamanho do texto que levam dentro e igual que na criação do botão por padrão, só necessitamos modificar alguns atributos no mesmo código HTML. Podemos consegui-lo com o seguinte código:
<a href=”#” data-role=”button” data-inline=”true” >Tem a mesma largura do texto</a>
Como se pode observar só tivemos que modificar o atributo data-inline e atribuir o valor a true com a finalidade de que o botão se limite ao tamanho do texto.
Outras das coisas que podem ser feitas com os botões é mudar suas cores, com o objetivo de não ficarmos com os que vêm de maneira pré-determinada. Como tudo em jQuery Mobile, é feito de maneira muito simples, rápida e com um grau de eficiência muito alto.
Ou seja, se o que queremos é ter um botão com diferentes cores, teríamos que escrever um atributo mais a nossos botões, tal código pode ser o seguinte:
<a href=”#” data-role=”button” data-inline=”true” data-theme=”e” >Este botao e de outra cor</a>
O que fizemos foi agregar o atributo data-theme ao qual damos o valor de “e” atribuindo um tema novo a nosso botão. Tais temas vão do “a” até o “e”. Como podemos imaginar, cada tema de terá cores diferentes. Por exemplo, se testamos o seguinte código:
<input type=”submit” data-role=”button” value=”submit com outra cor” data-theme=”b”/>
Obtemos um botão com uma atrativa cor azul, o que equivale a dar o valor de “b” ao tributo data-theme. Tudo isto nos comprova que fazer interfaces gráficas de usuário que visualmente sejam atrativas, é uma tarefa que pode ser feita em jQuery Mobile com certo grau de facilidade.
Para maior clareza deixo um código de uma página web que contém tudo o que foi explicado neste artigo, com o qual espero que se esclareçam algumas dúvidas que tenham ficado no ar:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Botões com jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Botoes</h1></div> <div data-role="content"> <a href="#" id ="botao" data-role="button" >Este é meu botão</a> <input type="button" data-role="button" value="Botao input"/> <input type="submit" data-role="button" value="Botao input com type submit"/> <a href="#" data-role="button" data-inline="true" >Tem a mesma largura do texto</a> <a href="#" data-role="button" data-inline="true" data-theme="e" >Este botao e de outra cor</a> <input type="submit" data-role="button" value="submit com outra cor" data-theme="b"/> </div> <div data-role="footer"><h3>Botoes</h3> </div> </body> </html>
Espero que se divirtam com jQuery Mobile!! No momento vamos deixá-lo até uma próxima ocasião, onde falaremos sobre como fazer listas mais atrativas com este framework. Não esqueçam de deixar comentários e anotações sobre este artigo.
Um abraço a todos! 🙂
