jQuery Mobile - Navegação Springboard

Este é um dos diversos exemplos da jQuery Mobile. Por favor acesse os artigos jQuery Mobile e jQuery para mais informações sobre as bibliotecas.

O código fonte deste exemplo pode ser encontrado aqui: https://github.com/gomobile/sample-jqm-springboard-nav.

    

Este exemplo é um esqueleto multi-páginas utilizando navegação baseada em abas. Para outros estilos de navegação, por favor veja os exemplos de navegação baseados em listas e em abas.

Adicionalmente, este exemplo demonstra técnicas de estilo personalizadas para adaptação a diversos tamanhos e rotações de tela, e obtém um resultado visual final diferente do padrão do jQuery Mobile.

Navegação baseada em Springboard

A página inicial principal apresenta um grid de ícones personalizados representando todas as páginas de navegação existentes. Os ícones são posicionados usando um layout em grids do jQuery Mobile. Um div com a classe ui-grid-a(/b/c/d) cria um layout em grid baseado em dois (/tres /quatro /cinco) colunas de tamanhos iguais, respectivamente. Cada coluna é formada por um div filho, com a classe ui-block-a(/b/c/d/e), ordenados alfaabeticamente da esquerda para a direita, até o número de colunas ditado pela configuração do ui-grid pai. O grid se ajusta em uma nova linha repetindo a sequencia de colunas.

 
<div class="ui-grid-a springboard"> <div class="ui-block-a"> <!-- (row 1, col 1) Friends --> </div> <div class="ui-block-b"> <!-- (row 1, col 2) Videos --> </div> <div class="ui-block-a"> <!-- (row 2, col 1) Photos --> </div> <div class="ui-block-b"> <!-- (row 2, col 2) Blogs --> </div> </div>

Layout Dinâmico

Idealmente, o springboard deve caber na viewport para que o usuário possa visualmente analisar todas as possibilidades de navegação sem precisar usar o scroll. Este exemplo utiliza JavaScript* para adaptar dinamicamente o tamanho dos ícones para se adaptar às dimensões atuais do viewport, que serão determinadas pelo dispositivo e por sua orientação.

A base do estilo CSS para cada ícone especifica seu max-width para ser 100%, o que de forma efetiva redimensiona o ícone para até a sua largura nativa sem ultrapassar o ui-block que o contém.

 
.springboard img { max-width: 100%; }

O código JavaScript determina dinamicamente quando o springboard ultrapassa o tamanho do viewport, conforme estabelecido pela base do estilo CSS. A posição do springboard é determinada utilizando o método offset do jQuery para obter a posição do elemento inferior esquerdo do springboard (o texto "Photos"). Como o offset provê as coordenadas relativas do documento da borda superior, mas não da inferior, nós adicionamos o height do elemento aos nossos cálculos. A altura do viewport de visualização é determinada usando o window.innerHeight. Se a base do springboard ultrapassar o viewport, um tamanho de ícone apropriado é calculado. Se não for necessário, os ícones podem continuar a tomar todo o tamanho da sua célula no grid até que tenham o seu tamanho nativo. 

 
/* determinar as coordenadas de baixo do springboard */ var bottom = bottomLeftElem.offset().top + bottomLeftElem.height(); /* determinar se o springboard excede o viewport */ var overflow = bottom - (VIEWPORT_HEIGHT - padding); /* encolher os ícones do springboard para caber, se necessário */ if (overflow > 0) { /* calcular os ajustes de altura para as duas linhas de ícones */ maxHeight = (iconHeight - overflow / 2) + 'px'; } else { /* permitir que os ícones tomem todo o grid (<= tamanho nativo do ícone) */ maxHeight = '100%'; }

Este cálculo de overflow acontece uma vez para cada orientação de dispositivo: após a carga inicial da aplicação e após a primeira rotação do dispositivo  (se ela ocorrer). O primeiro cálculo aguarda pelo evento $(window).load, ao invés de $(document).ready, para aguardar que todas as imagens tenham sido totalmente carregadas, para obter coordenadas precisas para o springboard. O segunfo cálculo utiliza o evento  window.orientationchange para detectar a rotação do dispositivo, e se anexa a este evento usando o método one da jQuery Mobile que é executado no máximo uma vez. Note que se o dispositivo for rotacionado enquando o exemplo ainda não está exibindo a página principal do springboard, este segundo cálculo é postergado até que a página principal seja mostrada na orientação rotacionada, para obter as coordenadas do springboard nesta orientação. Note ainda que existe um atraso em dispositivos Android entre o disparo do evento window.orientationchange e a atualização da medida window.innerHeight. Em vez de ficar fazendo o polling por um valor atualizado de window.innerHeight, este exemplo usa uma heurística simples de usar o viewport inicial menos 25px (uma medida que abrange a barra de status de diversos dispositivos móveis) como estimativa para a altura do viewport rotacionado. 

 
/* calcular na carga inicial do app */ $(window).load( /* calculate icon's maxHeight */ ); /* calcular após a primeira rotação do dispositivo */ $(window).one('orientationchange', /* calculate icon's maxHeight2 */ );

A altura máxima de ícone apropriada é então dinamicamente aplicada depois de cada cálculo e subsequente rotação de dispositivo.

 
/* aplicar os tamanhoa apropriados de ícones dependendo da orientação atual */ if (!rotated) { $('.springboard img').css('max-height', maxHeight); } else { $('.springboard img').css('max-height', maxHeight2); }

Tema Personalizado

       
Themas Padrão Tema Personalizado

O jQuery Mobileprovê cinco temas padrão,  nomeados de a-e, cada um com um conjunto diferente de cores. Por padrão, temas são aplicados a cabeçalhos e rodapés, e o dema c é aplicado ao conteúdo da página. Temas alternativos podem ser aplicados adicionando o atributo data-theme à página ou widgets individuais. Este exemplo aplica um tema personalizado criado utilizando a ferramenta ThemeRoller. Além de presonalizar as cores, este exemplo se beneficia das web fonts do CSS3 para também personalizar as fontes utilizadas. Isso envolve a definição de fontes personalizadas utilizando o CSS font-face, e então configurando a ferramenta ThemeRoller para usar a font-family personalizada como padrão (com fontes como opções de reserva). O tema personalizado para este exemplo é exportado da ferramenta ThemeRoller como vendor/jquery.mobile/jquery.mobile-1.1.1-custom.css, que aumenta mas não substitui a folha de estilos CSS padrão do jQuery Mobile, e por ser novamente importada pleo ThemeRoller para personalização adicional.

 
/* definir uma web font HTML5 personalizada */ @font-face { font-family: "CoveredByYourGrace"; src: url("../fonts/CoveredByYourGrace.ttf"); }
 
/* configuração de fonte do ThemeRoller */ CoveredByYourGrace, Helvetica, Arial, sans-serif

Cabeçalhos e Botões Personalizados

Enquanto o jQuery Mobile provê a abilidde de incorporar um ícone em um botão (padrão ou personalizado), este exemplo usa uma imagem personalizada como o botão propriamente dito. Para conseguir este cabeçalho de estilo presonalizado para todas as páginas secundárias, este exemplo embute todos os links no cabeçalho dentro de um div, para prevenir que o framework jQuery Mobile automaticamente transforme os links em botões. O comportamento da navegação para trás (back) deste botão personalizado é feito setando o atributo data-rel="back" na âncora.

 
<!-- cabeçalho personalizado para a página secundária --> <div data-role="header" data-id="springboardnav-header" data-position="fixed"> <h1>Friends</h1> <!-- embutir o link dentro de um div para prevenir que o jqm o converta automaticamente em botão --> <div class="springboard-backbtn"> <a href="#" data-rel="back"> <img src="images/backbtn/arrow.png"></img> </a> </div> </div>

Dispositivos Testados:

  • Samsung Galaxy S* II  (Google Android* 2.3.5, 480 x 800 pixels, hdpi)
  • Lava Xolo X900*  (Android 2.3.7, 600 x 1024 pixels, hdpi)
  • Motorola Droid* Razr M  (Android 4.0.4, 540 x 960 pixels, hdpi)
  • Asus Google Nexus* 7 (Android 4.1.1; display: 7 inches, 1280 x 800 pixels, tvdpi)
  • Amazon Kindle Fire* 2 (v.10.1.3 based on Android 4.0; display: 7 inches, 1024 x 600 pixels, mdpi)
  • Apple iPod Touch* 4th gen (Apple iOS* 4.3.1, 640 x 960 pixels, retina) !
  • Apple iPod Touch 4th gen e (iOS 6.0, 640 x 960 pixels, retina)
  • Apple iPad* 2 (iOS 5.1.1, 1024 x 768 pixels, non-retina)

evento window.orientationchange não suportado

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.