jQuery Mobile - Navegação em Lista
Actualizado por H. Pan (Intel)
Este é um dos diversos exemplos do jQuery Mobile. Por favor consulte os artigos de introdução ao jQuery MobileejQuery para mais informações.
O código fonte para este exemplo pode ser encontrado aqui: https://github.com/gomobile/sample-jqm-listnav.
Este exemplo é um esqueleto multi-páginas usando navegação baseada em listas. Para outros estilos de navegação de páginas, por favlor veja os exemplos de navegação tipo springboard e baseada em abas.
Navegação Baseada em Lista
A página principal apresenta uma lista de páginas que podem ser navegadas. Isto está implementado usando uma lista ligada básica do jQuery Mobile, que é uma lista não ordenada em HTML com um atributo data-role="listview". Cada item da lista contém um link para a página de destino, e um texto correspondente para ser exibido. Neste exemplo, cada um destes links foi personalizado com uma transição de deslizamento, que irá de forma sínicrona deslizar para fora a página atual e deslizar para dentro a nova página quando o link for clicado. Alternativamente, o estilo global de transição de página pode ser configurado setando a variável $.mobile.defaultPageTransition enquanto se trata o evento mobileinit do jQuery Mobile. Consulte o exemplo de navegação do tipo springboard para ver um outro tipo de transição de página (flip), e o exemplo de navegação por aba para ver como sobrescrever o estilo de transição padrão de uma página para todo o aplicativo.
<ul data-role="listview">
<li><a href="#section1" data-transition="slide">
<h3>Section 1</h3>
<p>Some short description.</p>
</a></li>
<li><a href="#section2" data-transition="slide">
<h3>Section 2</h3>
<p>Some short description.</p>
</a></li>
<li>
… itens adicionais da lista …
</li>
</ul>
Cabeçalhos Persistentes
O cabeçalho da aplicação fica no mesmo lugar quando a transição entre as páginas é realizada, provendo uma continuidade visual à aplicação enquanto as páginas são alteradas. Isto é implementado usando uma barra de ferramentas de cabeçalho persistente do jQuery Mobile. A base para a barra de ferramentas no cabeçalho é um div HTML com o atributo data-role="header". Cada página ainda precisa de seu próprio cabeçalho, mas setando o mesmo atributo data-id para todos os cabeçalhos informa ao framework jQuery Mobile que eles devem ser tratados como o mesmo cabeçalho.
<!-- barra de ferramenta de cabeçalho para a página principal --> <div data-role="header" data-id="listnav-header"> <h1>List Navigation</h1> </div><!-- uma barra de ferramenta de cabeçalho idêntica para todas as outras páginas, com o mesmo atributo data-id --> <div data-role="header" data-id="listnav-header"> <h1>List Navigation</h1> </div>
Voltar a Navegação
Um app em plataforma cruzada em HTML5 que é executado dentro de um webview não pode confiar no botão voltar fornecido por um navegador em um dispositivo Android. este exemplo adiciona um atributo data-add-back-btn="true" a todas as páginas secundárias, o que pede ao framework que inclua um botão voltar na barra de ferramentas de cabeçalho para navegar de volta à página anterior. De forma alternativa, setando o atributo data-rel="back" em uma âncora HTML fará com que qualquer clique nesta âncora navegue um passo para trás no histórico de navegação. Por favor consulte o exemplo de navegação tipo springboard para um exemplo de como adicionar manualmente um botão voltar, para ter controle total sobre o seu estilo e posicionamento.
<div data-role="page" id="section1" data-add-back-btn="true">
<div data-role="header" data-id="listnav-header">
<h1>List Navigation</h1>
</div>
:Formatação de Imagens
O div photoContainer é usado para formatar a imagem da página principal. Primeiro, ele utiliza uma margem de -15px para definir o padrão de estilo de conteúdo do jQuery Mobile com um padding de 15px (ver .ui-content no jquery.mobile-1.1.1.css), para que a foto posssa preencher toda a largura do viewport. Segundo, ele controla o posicionamento do caption da foto. O caption é absolutamente posicionado de forma relativa ao seu div pai photoContainer, tendo em vista que o posicionamento absoluto do css está definido para ser relativo ao elemento de fechamento mais próximo que não possuir um posicionamento estático (com o elemento raiz html como o elemento de base para o fechamento). Finalmente, ele fornece adaptabilidade básica para telas com tamanho grande.
A imagem de base é de 636 x 378 pixels. Setando o max-width da imagem para 100% sem especificar sua largura ou altura, a imagem irá preencher a largura do viewport até a sua largura nativa. Para telas mais largas, o div photoContainer centraliza a imagem, e provê um gradiente linear cinza escuro de fundo para preencher o espaço remanescente. O gradiente é especificado usando diversos prefixos de vendor e uma opção de reserva com cor sólida para fornecer suporte em plataforma cruzada. Técnicas de imagem mais sofisticadas e responsivas podem ser usadas ao invés de se fornecer imagens de diferentes proporções e resoluções para diferentes telas.
<div id="photoContainer"> <img id="photo" src="images/photo.jpg"></img> <div id="photoCaption"> <a href="http://www.flickr.com/photos/msvg/4665338572/">original photo</a> by Michael Gil </div> </div>/* div container para posicionar a foto + caption */ #photoContainer { position: relative; padding: 0px; /* sobrescreve o padding de conteúdo do jQuery Mobile de 15px */ margin: -15px; /* fundo escuro se a foto não complementar toda a largura */ background: #121212; /* fall back color if gradient is not supported */ background-image: -webkit-linear-gradient(#111, #282828, #111); background-image: -moz-gradient(#111, #282828, #111); background-image: -ms-linear-gradient(#111, #282828, #111); background-image: -o-linear-gradient(#111, #282828, #111); background-image: linear-gradient(#111, #282828, #111); /* centraliza a foto */ text-align: center; }/* redimensiona a foto para o min(largura da tela, largura original da foto) */ #photo { max-width: 100%; }/* posiciona o caption no canto esquerdo inferior da foto (com padding de 10px) */ #photoCaption { position: absolute; bottom: 25px; /* cálculo para margem de -15px margin para o #photoContainer */ right: 10px; font-size: 10px; color: white; }
Dispositivos Testados:
- Samsung Galaxy S* II smartphone (Google Android* 2.3.5; display: 4 inches, 480 x 800 pixels, hdpi)
- Lava Xolo X900* smartphone (Android 2.3.7; display: 4 inches, 600 x 1024 pixels, hdpi)
- Motorola Droid* Razr M smartphone (Android 4.0.4; display: 4.3 inches, 540 x 960 pixels, hdpi)
- Asus Google Nexus* 7 tablet (Android 4.1.1; display: 7 inches, 1280 x 800 pixels, tvdpi)
- Amazon Kindle Fire* 2 tablet (v.10.1.3 based on Android 4.0; display: 7 inches, 1024 x 600 pixels, mdpi)
- Apple iPod Touch* 4th gen mobile device (Apple iOS* 4.3.1; display: 3.5 inches, 640 x 960 pixels, retina)
- Apple iPod Touch 4th gen mobile device (iOS 6.0, display: 3.5 inches, 640 x 960 pixels, retina)
- Apple iPad* 2 tablet (iOS 5.1.1, display: 9.7 inches, 1024 x 768 pixels, non-retina)
