Introdução
Nesse artigo vamos falar sobre jQuery Mobile Framework, sobre como criar múltiplas páginas, botões, formulários, listas e outros elementos básicos. Primeiramente vamos ver um exemplo de página básica criada com o jQuery Mobile e depois começaremos a trabalhar com os atributos para adicionarmos outros elementos à nossa página.
<html>
<head>
<title>jQuery Mobile - Macoratti .net</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>cabeçalho</h1>
</div><!-- /header -->
<div data-role="content">
<p>Corpo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Rodape</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Com esse exemplo acima obtivemos uma página com cabeçalho, corpo e rodapé. Agora vamos começar a adicionar outros elementos dentro desse mesmo HTML.
Múltiplas páginas
Nesse mesmo HTML podemos incluir diversos blocos de páginas básicas e assim teremos um arquivo HTML com varias páginas, cuja estrutura é chamada de “multipáginas”. Mas é bom ressaltar que isso não quer dizer que com jQuery Mobile tenhamos que criar sempre todas as páginas do website dentro do mesmo arquivo HTML. Se desejarmos podemos organizá-las em arquivos separados, ou até mesmo fazermos uma mistura entre páginas multipáginas e páginas básicas em diferentes arquivos HTML.
Como podemos notar, nessa página básica se encontram arquivos de script JavaScript e estilos CSS do framework e também a tag META que usamos para definirmos a escala ou zoom na qual se deverá apresentar. Tudo isso continuará da mesma maneira que o layout básico, nesse arquivo a única coisa que vamos mudar é o corpo da página, onde vamos adicionar vários blocos data-role="page".
Agora vamos criar um exemplo que possuirá as seguintes características
- Página principal
- Página 2
- Página 3
- Link para página 2
- Link para página 3
- E ambas as páginas possuem um link voltar, que volta para página principal
<html>
<head>
<title>jQuery Mobile Multipáginas</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<!-- P[agina Principal -->
<div data-role="page" id="principal">
<div data-role="header">
<h1> Cabeçalho - Página principal.</h1>
</div>
<div data-role="content">
<p> multipágina jQuery Mobile </p>
<p> Ir página 2 <a href="#pagina2"> Segunda Página </a> </p>
<p> ir página 3 <a href="#pagina3" data-rel="dialog"> Terceira Página </a> </p>
</div>
<div data-role="footer">
Rodapé
</div>
</div>
<!-- Fim página Principal. -->
<!-- Página 2 -->
<div data-role="page" id="pagina2" data-title="Exemplo página 2">
<div data-role="header">
<h1> Exemplo Página 2 </h1>
</div>
<div data-role="content">
<p> com esse exemplo podemos ver as multipáginas</p>
<p> <a href="#principal">Voltar</a></p>
</div>
<div data-role="footer">
Rodapé
</div>
</div>
<!-- Fim Página 2 -->
<!-- Página 3 -->
<div data-role="page" id="pagina3" data-title="Exemplo página 3">
<div data-role="header">
<h1> Exemplo Página 3 </h1>
</div>
<div data-role="content">
<p> Página 3 final. </p>
<p> <a href="#principal">Voltar</a></p>
</div>
<div data-role="footer">
Rodapé
</div>
</div>
<!-- Fim página 3 -->
</body>
</html>
Assim construímos as três páginas dentro do mesmo HTML e o jQuery se encarrega de apresentar como se fossem páginas separadas. A navegação entre elas foi realizada através de links.
Vamos entender como isso funciona. Para começo já sabemos que as páginas são ligadas através de links, mesmo estando dentro do mesmo arquivo HTML.
Links: funcionam porque cada uma das páginas básicas do sistema multipáginas possui um Id, que é definido na DIV principal da página, a que tem “data-role=”page””. Veja o exemplo do código para definir o Id.
<div data-role="page" id="principal">
Como podemos, notar foi colocado id=”Principal”, assim essa div já tem um nome atribuído a ela. Agora, se quisermos fazer um link para esse indicador vamos simplesmente criar um link como se fosse um link interno (âncora). Para isto colocamos o href=”#principal”, ou seja, exatamente como fizemos no nosso exemplo de multipáginas anterior.
<a href="#principal">Voltar</a>
Titulos: Já que todas as nossas páginas estão no mesmo arquivo HTML, elas compartilham do mesmo titulo definido na dentro da tag HEAD. Mas com certeza queremos que cada uma possua seu titulo individualmente. E para que isso seja possível, o jQuery Mobile possui o atributo data-title que é colocado no div principal de cada uma das páginas
Na tag data-title podemos indicar o titulo que cada página deve possuir e o jQuery Mobile e responsabilizara de atualizar automaticamente quando se navegar nessas páginas. A seguir temos um exemplo de definição do titulo da página 2.
<div data-role="page" id="pagina2" data-title="Exemplo página 2">
Dessa forma, quando o usuário clicar no link que o levará a essa página, o titulo da janela do navegador mudará automaticamente para o que indicamos no atributo data-title="Exemplo página 2".
Ao vermos o exemplo em funcionamento, podemos observar que utilizamos dois tipos de comportamento dinâmicos.
- As transações entre páginas, usando um efeito de deslocamento suave.
- A mudança de titulo (TITLE) automática do documento, ao irmos de uma página para a outra.
Temas
Para definirmos os temas, utilizamos o atributo data-theme e pode ser aplicado ao cabeçalho, rodapé, conteúdo ou às divs que possuam o atributo data-role="page", para garantir que a cor de fundo será aplicada à página toda. Quando fazemos isso todos os widgets na página irão receber o tema especificado também. Vejamos exemplos de temas abaixo.
<html>
<head>
<title>jQuery Mobile - Macoratti .net</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header"data-theme="a">
<h1>cabeçalho</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<p>Corpo</p>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<h4>Rodape</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Para alterarmos o tema basta mudarmos a letra dentro da tag “data-theme”, podemos usar de A a E.
Botões
Ao utilizarmos jQuery Mobile, adquirimos uma forma simples de criarmos os botões através de uma série de propriedades e atributos que vem pré-configurados no framework. E o melhor de tudo é que para isso precisamos utilizar poucas linhas de código no nosso HTML.
Uma outra coisa interessante a ressaltar é que para criarmos nossos botões não necessitamos fazer a criação de scripts, pois a criação é feita diretamente em nosso código HTML. Conseguimos isso com o seguinte código.
<a href="#" id ="boton" data-role="button" >Este é um botão simples com jQM</a>
Essa linha de código pode ser inserida dentro daquele exemplo que criamos de multipáginas, alterando os links por botões da seguinte maneira. Trocando a seguinte linha de código:
<p> Ir página 2 <a href="#pagina2"> Segunda Página </a> </p>
Pelo código abaixo.
<a href="#pagina2" id ="botao1" data-role="button" >página 2</a>
Assim obteremos o seguinte resultado.
Como podemos observar, agora temos o botão para ir à pagina 2 e continuamos tendo o link para ir para a página 3. Mas podemos alterar todos os links por botões normalmente, neste exemplo efetuamos a mudança apenas do botão para página 2, para podemos ter noção da diferença.
Como podemos ver, foi extremamente fácil criar nosso botão. A única coisa que tivemos de fazer foi atribuir o valor “button” ao atributo data-role do nosso link. Também podemos fazer isso com um botão criado através de inputs, onde o código ficaria da seguinte forma.
<input type="button" data-role="button" value="Botão input"/>
Isso significa que podemos facilmente criar um botão submit estilizado para enviarmos formulários, nos ajudando a sair do clássico e convencional botão HTML, conseguirmos isso com o seguinte código.
<input type="submit" data-role="button" value="Botão imput type submit"/>
Uma das coisas comuns com os botões é que eles ocupam o tamanho completo da tela independente a largura da mesma. Porém muitas vezes não queremos que esse botão ocupe toda a largura, então usando o jQuery Mobile existe uma maneira muito simples em que esses elementos se ajustam ao tamanho do texto que levam como value. A maneira de criação é igual à de um botão padrão, apenas temos a necessidade de alterar alguns atributos no mesmo código HTML, da seguinte maneira.
<a href="#" data-role="button" data-inline="true" >botao com maior quantidade de
texto</a><br>
<a href="#" data-role="button" data-inline="true" >botão com texto médio</a><br>
<a href="#" data-role="button" data-inline="true" >botão </a><br>
Se repararmos o código acima, a única coisa que tivemos que inserir a mais foi a data-inline=”true”, com o propósito de fazer com que o botão se limite ao tamanho do texto
Dessa maneira conseguimos perceber que quanto menor o texto menor o tamanho do botão.
Agora uma coisa interessante de fazermos é mudarmos a cor dos botões, para podemos personalizar de acordo com as necessidades ou gosto e não ficarmos com os que vem de maneira pré-determinada. Como já podemos notar, tudo é feito de maneira muito simples no jQuery Mobile e para isso precisamos apenas adicionar mais um atributo ao nossos botões.
<a href="#" data-role="button" data-inline="true" data-theme="e" >Este botao e de outra cor</a>
O que fizemos aqui foi adicionar o atributo data-theme=”e”, onde o “E” poderia ser substituído por uma letra de A a E.
Como podemos ver na Figura 11, o único botão que sofreu alteração foi o botão onde incluímos o atributo data-theme=”e”. Para modificarmos o tema de todos os botões teríamos que estar adicionando esse mesmo atributo em todos os outros e até mesmo nas divs, como já foi falado, assim alterando o tema de todo nosso layout.
Listas
As listas são alguns dos componentes de interface do usuário mais eficientes e úteis no jQuery Mobile, já que podemos as utilizar como menu de contextos, ou qualquer outro uso que quisermos em nossa aplicação web.
Vamos iniciar criando uma lista simples usando as pré-definições do jQuery Mobile, para isso temos que utilizar o seguinte código em nosso documento HTML.
<ul data-role="listview">
<li><a href="#pagina1">Página 1</a></li>
<li><a href="#pagina2">Página 2</a></li>
<li><a href="#pagina3">Página 3</a></li>
</ul>
Com isso conseguimos criar uma lista simples, onde seus elementos estão servindo de link para acessarmos três páginas. Cada página está ligada a um elemento da lista, ou seja, se clicarmos no elemento com o texto “Página 1”, o navegador nos levaria até essa página.
Agora vamos criar mais um exemplo de lista, nesse caso uma lista com divisórias onde essas divisórias podem nos servir para separar temas, tipos de grupo, etc.
<body>
<div data-role="header">
<h1>Cabeçalho</h1>
</div>
<ul data-role="listview" >
<li data-role="list-divider">Artigos </li>
<li><a href="#jQM" >JQuery Mobile</a></li>
<li><a href="#delphi" >Delphi</a></li>
<li data-role="list-divider">Curso em andamento</li>
<li><a href="#html">HTML</a></li>
<li><a href="#JavaScript">JavaScript</a></li>
</ul>
<div data-role="footer">
Rodapé
</div>
</body>
É outra forma muito prática de criarmos uma lista, a única coisa que tivermos que fazer foi agregar dois elementos <li> na mesma posição onde desejamos ter nossos divisores, mas nestes elementos tivemos que definir o atributo data-role=”list-divider”, isso é o suficiente para criarmos um divisor.
Mais uma coisa interessante que podemos estar adicionando em nossas listas são as margens, pois como podemos ver, as nossas listas ocupam completamente a largura da tela independente de qual seja a resolução. Se desejarmos podemos adicionar essa margem através de um novo atributo da nossa lista que é inserido dentro da tag <ul>. Esse atributo é o data-inset que recebe um valor boleano, ou seja, apenas verdadeiro ou falso. Para produzirmos as margens temos que definir o valor desse atributo como true, dessa forma obteremos uma lista que criará certas margens em relação à página, além de criar uma borda arredondada. Podemos fazer isso com o seguinte código.
<ul data-role="listview" data-inset="true">
Vou ficando por aqui com mais este artigo. Como sempre é uma grande satisfação poder compartilhar informações com vocês leitores. Nos veremos em breve com mais um artigo, até lá, deixem seus comentários, dúvidas e temas para novos artigos.
Um grande abraço a todos.
