jQuery Mobile - Navegação em Lista

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)