A cada passo que vimos do nosso Manual de jQuery Mobile conhecemos um pouco mais de cada funcionalidade e vemos como ele é simples e poderoso, não é mesmo ?
Uma das coisas que particularmente mais me agradam de jQuery Mobile são as barras de navegação, por serem extremamente práticas. Servem precisamente para o que seu nome indica, navegar, mas o fazem de uma maneira magistral. Possuem um aspecto muito vistoso, além de certas propriedades que poderemos ajustar com o fim de fazê-las mais potentes.
Para explicar as barras de navegação vamos realizar algo parecido ao exemplo desenvolvido no artigo onde falamos sobre as listagens, onde tínhamos quatro páginas dentro do mesmo documento HTML. A primeira é uma página inicial e as outras três servem para mostrar a informação adicional à pagina.
Neste caso, vamos fazer o exemplo de uma página que fale sobre jQuery, outra página que fale de jQuery UI e uma última sobre jQuery Mobile. A página inicial só terá uma introdução e a barra de navegação para ir para as outras. Ademais, para completar o artigo, veremos também algumas coisas interessantes da configuração de jQuery a respeito das transições.
Adicionando as barras de navegação
As barras de navegação são algo parecidas às abas, por isso o ideal é colocá-las no cabeçalho (elemento com data-role=”header”), ou no pé da página (elemento com data-role=”footer”). Isto não é estritamente necessário, mas faz com que nossa aplicação fique mais bem organizada. No caso do exemplo deste artigo, colocaremos a barra de navegação no pé da página, algo que se consegue com o seguinte código:
<div data-role=”navbar”>
<ul>
<li><a href=”#jq” >jQuery</a></li>
<li><a href=”#jqui” >jQuery UI</a></li>
<li><a href=”#jqm”>jQuery Mobile</a></li>
</ul>
</div>
Como devemos saber, se seguimos o andamento do Manual de jQuery Mobile, em relação aos widgets do framework, devemos adicionar-lhe o atributo data-role. Neste caso recebe o valor de “navbar”. Ademais, como se observa no código anterior, temos que criar uma estrutura em HTML, com um elemento DIV, dentro do qual deve estar contida uma lista (Elemento UL). Porém, atenção, porque esta lista não organizará seus elementos um debaixo do outro, mas um a continuação do outro, ou seja, cria uma barra horizontal.
Neste momento, talvez alguns leitores se preocupem com o espaço, em caso de que, ao se expandir de forma horizontal, não caibam todos os elementos nas, frequentemente, estreitas telas dos dispositivos. O problema é resolvido por jQuery Mobile de forma muito eficiente, já que cada um dos elementos têm a mesma largura, ou seja, se tivermos dois elementos, cada um terá a metade da largura da barra, e se forem três ,então cada um será de uma largura igual a um terço da barra. Ainda há mais, pois se a tela é muito pequena, ou são muitos elementos, então mostraria a barra em várias linhas, passando de uma fila de elementos para uma grade ou tabela.
Adicionando temas
Vimos que para adicionar temas a qualquer dos widgets, presentes no framework, só devemos colocar o atributo data-theme. No entanto, nas barras de navegação não funciona assim. Ou seja, se fazemos isto no nosso elemento DIV, não provocará nenhuma mudança. Em troca, se quisermos que todos os elementos da barra de navegação sejam visualizados diferentemente do que jQuery Mobile lhes atribui por padrão, devemos adicionar o data-theme no elemento que contém a nossa barra, que neste caso é o pé da página.
Se fizermos o que se explicava anteriormente terminaríamos por construir um pé de página como o seguinte.
<div data-role=”footer” data-position=”fixed” data-theme=”b”>
<div data-role=”navbar”>
<ul>
<li><a href=”#jq” data-icon=”star”>jQuery</a></li>
<li><a href=”#jqui” data-icon=”plus”> jQuery UI </a></li>
<li><a href=”#jqm” data-icon=”grid”> jQuery Mobile </a></li>
</ul>
</div> <!– /navbar –>
</div> <!– /footer –>
Como você pode ver, além de agregar o tema “b” ao pé da página, com o que obtemos a cor azul, também coloquei um ícone a cada um dos elementos que compõem a barra de navegação. Se você não sabe como trabalhar com ícones, revise o artigo anterior do manual de jQuery Mobile onde nos dedicamos a explicar o tema dos ícones e suas configurações.
Porém, cabe ressaltar que se pode atribuir um tema diferente a cada um dos elementos. Talvez você queira algum realce, como, por exemplo, o que tem o texto jQuery Mobile, algo que conseguimos com um código como o seguinte.
<li><a href=”# jqm” data-icon=”grid” data-theme=”e” data-transition=”flip”> jQuery Mobile </a></li>
Agora adicionamos um data-theme a um único elemento, mas talvez chame a atenção, o atributo data-transition. Com essa configuração logramos que ao passar de uma página a outra se modifique a transição normal que jQuery Mobile faz.
Transições entre páginas com jQuery Mobile
jQuery Mobile quando se passa de uma página a outra, tanto se são arquivos diferentes como se são páginas no mesmo documento HTML com a estrutura multipágina, se produz uma transição automática. Este assunto já tinha sido comentado anteriormente em outros artigos do Código Simples, mas para os que ainda não saibam, trata-se de um efeito especial bastante atrativo, que mediante uma animação suavizada, nos intercambia a página que estamos visualizando. A transição por padrão pode ser mudada por meio de atributos HTML de uma maneira muito simples.
O atributo data-transition, com o qual modificamos as transições entre as páginas ou caixas de diálogo, pode receber os seguintes valores:
- Slide: a que se atribui por padrão. data-transition=”slide”
- Slide Up: A página se perderá pela parte superior. data-transition=”slideup”
- Slide Down: A página se perderá pela parte inferior. data-transition=”slidedown”
- Pop: A página aparece de imprevisto. data-transition=”pop”
- Fade: Faz um efeito de fusão. data-transition=”pop”
- Flip: A página faz um bonito efeito 3D. transition=”flip”
Exemplo de navegação em uma página web
Para maior compreensão deixaremos o código do exemplo mencionado neste artigo. Para economizar um pouco de espaço, só coloquei o código das duas primeiras páginas. Teremos uma barra de navegação na página inicial. Devo mencionar que a página não desempenha grandes tarefas funcionais, mas ilustra o uso das barras de navegação, além das transições de páginas.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title> Barras de Navegacao</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" id="inicio">
<div data-role="header" data-position="fixed">
<h1>jQuery</h1>
</div><!-- /haeder -->
<div data-role="content">
<p>Navega através desta aplicacao de CriarWeb.com para conhecer algo sobre jQuery</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#jq" data-icon="star" data-transition="pop">jQuery</a></li>
<li><a href="#jqui" data-icon="plus" data-transition="slideup"> jQuery UI </a></li>
<li><a href="#jqm" data-icon="grid" data-theme="e" data-transition="flip"> jQuery Mobile </a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="jqm">
<div data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1><a href="#inicio" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Inicio</a>
</div><!-- /haeder -->
<div data-role="content">
<p>Leitura inicial da web oficial de jQuery Mobile:</br> <span class="ui-btn-active"> jQuery Mobile: framework para móveis.</span>
</p>
<img style="width:30%;" src="http://upload.wikimedia.org/wikipedia/commons/5/53/Jquery-mobile-logo.png"/>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="b">
<h3>jQuery Mobile</h3>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Com tudo isto aprendemos dois tópicos de jQuery Mobile. Por um lado, as mencionadas barras de navegação, mas também demos uma primeira repassada nas transições entre páginas.
Um abraço a todos!
Não deixem de ver as novidades na nossa Fã Page!
