Ao longo do Manual de jQuery Mobile vimos que as capacidades deste framework são realmente surpreendentes. Em artigos anteriores se mostraram algumas das benesses destas bibliotecas para o desenvolvimento de websites para dispositivos móveis. Relatamos o uso de diversos componentes de interface gráfica de usuário, mas também existem outros modos interessantes de enriquecer visualmente nossos widgets.
Neste artigo exploraremos uma das formas que jQuery Mobile oferece para melhorar o desenho de aplicações, de uma maneira simples, através de ícones que vêm pré desenhados dentro do mesmo framework. O uso destes elementos é algo que nos facilita muito a vida à hora de desenvolver websites, pois podemos fazer interfaces visualmente mais atrativas.
Acrescentar ícones aos componentes de interface gráfica de usuário
Como tratamos de demonstrar em artigos anteriores, jQuery Mobile oferece muitas utilidades e de uma maneira muito fácil. No caso dos ícones, para fazer uso deles, não são necessárias grandes configurações ou linhas de código Javascript. Só um pouco mais de HTML.
Pois bem, comecemos com os ícones. Imaginem que têm um botão que nos envia à página inicial de nossa aplicação web. Este botão pode ser feito mais atrativo e visual se colocarmos um ícone que represente o fim ou o uso que tem. Qual seria esse ícone? Onde conseguimos esse ícone?
As duas perguntas ou dúvidas são resolvidas por jQuery Mobile de maneira simples. Primeiro o ícone seria uma casa que representa o home. Claro, este ícone vem incorporado dentro do framework. Respondendo à segunda pergunta, para fazer com que nosso botão tenha o ícone da casa, só se necessita o seguinte código:
<a href=”#” data-role=”button” data-icon=”home” > Inicio</a>
Só há que acrescentar um novo atributo data-icon e atribuir o valor de “home”. Com isto conseguimos que nosso botão tenha um pequeno ícone de uma casa.
Mas isso não é tudo. jQuery Mobile dispõe de ícones em várias cores e utilizará aquela que melhor se visualize com o tema gráfico que você esteja utilizando em sua aplicação. Suponhamos que seu botão tem o tema “a”, com o que conseguimos que elementos como botões sejam de cor negra. Nesse caso o ícone será de cor branca, para que ressalte. Agora, se você tem o tema “c”, que é uma cor de tom muito baixo, o framework atribuirá a nosso botão um ícone mais escuro, sempre acorde com a cor do tema.
jQuery Mobile conta com uma longa lista de ícones. Todos são indicados através de distintos valores do atributo data-icon. Alguns exemplos são os seguintes:
- Seta para a esquerda: data-icon=”arrow-l”
- Seta para a direita: data-icon=”arrow-r”
- Seta para cima: data-icon=”arrow-u”
- Seta para baixo: data-icon=”arrow-d”
- Eliminar: data-icon=”delete”
- Mais: data-icon=”plus”
- Menos: data-icon=”minus”
Nota: Esta é apenas uma lista parcial, para mencionar alguns exemplos. Se você quiser saber a lista completa convido você a vê-la na documentação oficial de jQuery Mobile.
Posição dos ícones
Por padrão jQuery Mobile, mostrará os ícones na parte esquerda do botão, mas essa configuração também pode ser alterada através de um atributo no código HTML. Podemos observar a seguinte tag: <a href=”#” data-role=”button” data-icon=”plus” data-iconpos=”bottom”> Inicio </a>
Como se pode ver, agora usamos outro ícone com o nome “plus”. Além disso, no código HTML agregamos o atributo data-iconpos=”bottom”, para colocar o ícone sob o texto. Este atributo pode receber os seguintes valores para posicionar o ícone: “top”, “left”, “right” e “bottom”. Falta a explicação dos resultados que obteremos com cada um deles.
Além dos valores mencionados anteriormente, o atributo data-icon-pos pode receber um quinto valor, que é: “notext”, com o que eliminamos o texto de nosso botão e só aparecerá o ícone que tenhamos atribuído.
Agora criaremos um botão que só terá nosso ícone, ou seja, não aparecerá o texto. Ele será acrescentado dentro do header, com o objetivo de obter um botão parecido ao da documentação de jQuery Mobile, algo que conseguimos com o seguinte código:
<a href=”#” data-role=”button” data-icon=”home” data-iconpos=”notext” class=”ui-btn-right”>Inicio</a>
Como podem ver, não só o deixamos sem texto como também lhe atribuímos a classe CSS “ui-btn-right” com o objetivo de que apareça à direita do header. Tudo isto vem pré- desenhado no framework e só devemos usá-lo através do HTML.
Onde situar os arquivos dos ícones jQuery Mobile
Os ícones são arquivos gráficos e, portanto, para que se vejam em seu website, terão que estar em algum lugar acessível pelo navegador. Em principio essa localização pode variar, atendendo a dois possíveis usos do framework.
- Se você está trabalhando com jQuery Mobile dentro de seu mesmo servidor ou de forma local (ou seja, você entrou na sua web http://jquerymobile.com, baixou o zip do framework para incluí-lo em suas páginas), você verá que dentro do download há uma pasta chamada “images”, que você deve incluir dentro do diretório de seu servidor onde você colocou o estilo CSS de jQuery Mobile. (O arquivo de folhas de estilo de jQuery Mobile se chama algo como jquery.mobile-1.0.min.css).
- Se você está trabalhando com o CDN de jQuery Mobile, ou seja, você está incluindo tanto os estilos como os scripts Javascript a partir da rota absoluta do próprio domínio do framework, você não necessita incluir as imagens em nenhum lugar. Ou seja, os ícones serão acessados diretamente desde o servidor de jQuery Mobile e portanto você não necessita copiá-los em seu espaço de hosting.
Colocando tudo junto
Para facilitar um pouco as coisas vou deixar um código HTML, com uma pagina web de exemplo onde se usa todo o explicado neste artigo. Devo mencionar que esta web, não faz nada especial só demonstra o funcionamento dos ícones e todo o exposto no presente artigo.
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Icones 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" data-theme="b"> <a href="#" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Inicio</a> <h1>Uso de icones com jQuery Mobile</h1> </div> <div data-role="content" data-theme="c"> <a href="#" data-role="button" data-icon="home" >Inicio</a> <a href="#" data-role="button" data-icon="plus" data-iconpos="bottom">Inicio</a> </div> <div data-role="footer" data-theme="b"> <h3>Uso de icones com jQuery Mobile</h3> </div> </div> </body> </html>
