Obtenha uma introdução à estrutura jQuery Mobile. Conheça os fundamentos da estrutura e saiba como escrever uma interface com o usuário para aplicativo móvel da web funcional. Neste artigo, um exemplo guia você ao longo das páginas básicas, navegação, barras de ferramentas, visualizações de lista e efeitos de transição.

C. Enrique Ortiz, Developer and author, Free-lancer

C. Enrique Ortiz tem ampla experiência como tecnólogo de dispositivos móveis e escritor. Foi engenheiro de software para ônibus espacial que decidiu se concentrar em tecnologias de dispositivos móveis em vez de trabalhar com foguetes perigosos e presta assessoria a desenvolvedores, novas empresas e investidores em todos os assuntos relacionados a dispositivos móveis: tecnologia, estratégia, produtos e entrada no mercado.



06/Ago/2012

Introdução

O jQuery Mobile é uma estrutura excelente para criar aplicativos da web móveis. Desenvolvido com base no conhecido jQuery e em sua interface com o usuário (UI), o jQuery Mobile é uma estrutura efetiva e unificada para criar aplicativos da web móveis. Com o jQuery Mobile, é possível garantir aparência e comportamento consistentes em plataformas de dispositivos móveis diferentes. Os recursos básicos do jQuery Mobile são:

  • Simplicidade e flexibilidade gerais
    O uso da estrutura é simples. É possível:
    • Desenvolver páginas usando marcação acionada com pouco ou nenhum JavaScript.
    • Usar eventos e Javascript avançado.
    • Usar um único documento HTML com várias páginas integradas.
    • Dividir o aplicativo em várias páginas.
  • Aprimoramento progressivo e degradação suave
    Embora o jQuery Mobile utilize o HTML5, CSS 3 e JavaScript mais recentes, nem todos os dispositivos móveis fornecem esse suporte. A filosofia do jQuery Mobile é suportar tanto os dispositivos de alto nível quanto os com menos recursos — como os que não suportam JavaScript — e, mesmo assim, fornecer a melhor experiência possível.
  • Suporte para toque e outros métodos de entrada
    O jQuery Mobile fornece suporte para diversos métodos de entrada e eventos: toque, mouse e métodos de entrada do usuário baseados em foco.
  • Acessibilidade
    O jQuery Mobile foi projetado tendo em mente a acessibilidade. Tem suporte para Accessible Rich Internet Applications (WAI-ARIA) para ajudar a tornar as páginas da web acessíveis para visitantes portadores de deficiência por meio de tecnologias assistivas.
  • Leve e modular
    A estrutura é leve com um tamanho geral (minificado e compactado com Gzip para a versão 1.0.1) de 24 KB para a biblioteca JavaScript e 7 KB para o CSS, além de alguns ícones.
  • Tema
    A estrutura também fornece um sistema de tema que permite definir o estilo do seu aplicativo. Com o novo aplicativo ThemeRoller, é possível criar facilmente os seus próprios temas.

A estrutura jQuery Mobile inclui todos os componentes da UI necessários para desenvolver aplicativos da web móveis e websites completos: páginas, diálogos, barras de ferramentas, diversos tipos de visualização de lista, uma série de elementos de formulário e botões, etc. O jQuery Mobile foi desenvolvido com base no núcleo do jQuery, portanto, você tem acesso a recursos importantes, como travessia e manipulação do modelo de objeto de documento (DOM) HTML e XML, manipulação de eventos, comunicação com o servidor usando Ajax e efeitos de animação e imagem para páginas da web.

Com o jQuery Mobile, é possível escrever aplicativos da web móveis básicos sem muito esforço. Já que o jQuery Mobile é uma estrutura muito abrangente com eventos avançados e APIs, também é possível escrever aplicativos da web móveis e websites.

Este artigo apresenta os fundamentos da versão mais recente do jQuery Mobile (versão 1.0.1). Saiba mais sobre suporte ao navegador, os componentes da UI e a API. Para acompanhar este artigo, será necessário ter:

  • Exposição anterior ao HTML
  • Entendimento dos fundamentos do JavaScript
  • Conhecimento básico de jQuery

É possível fazer o download do exemplo de código fonte do jQuery Mobile usado neste artigo. A seção Recursos tem informações sobre o jQuery Mobile, jQuery, JavaScript, DOM, HTML5, etc.


Suporte ao navegador

Os navegadores móveis evoluíram bastante, mas nem todos os dispositivos móveis fornecem suporte para HTML5, CSS 3 e JavaScript. É nessa área que o suporte ao aprimoramento progressivo e a degradação suave do jQuery Mobile entram em ação.

O jQuery Mobile suporta tanto os dispositivos de alto nível quanto os com menos recursos, como os que não suportam JavaScript. O aprimoramento progressivo, que é uma filosofia de design, consiste nos seguintes princípios centrais (Wikipédia):

  • Todo o conteúdo básico deve estar acessível a todos os navegadores.
  • Toda a funcionalidade básica deve estar acessível a todos os navegadores.
  • O layout aprimorado é fornecido pelo CSS vinculado externamente.
  • O comportamento aprimorado é fornecido pelo JavaScript vinculado externamente.
  • As preferências de navegador do usuário final são respeitadas.

Todo o conteúdo básico deve ser renderizado (conforme o projetado) em dispositivos básicos, ao passo que as plataformas e os navegadores mais avançados serão aprimorados progressivamente com JavaScript e CSS adicionais e vinculados externamente.

O jQuery Mobile fornece suporte para um grande número de dispositivos móveis. O jQuery Mobile classifica (agrupa) o suporte a dispositivos em três categorias com base no nível de suporte:

  • Grau A: dispositivos com suporte para uma experiência totalmente aprimorada, com transições de página animadas baseadas em Ajax. O jQuery Mobile suporta mais de 20 dispositivos diferentes, como iOS 3.2-5.0, Android 2.1-2.3 e 3.0, BlackBerry 6-7 e Playbook, Skyfire 4.1, Opera Mobile e os navegadores de desktop Chrome, Firefox, Internet Explorer e Opera.
  • Grau B: dispositivos com suporte para uma experiência aprimorada, mas sem dispositivos de navegação do Ajax. Os dispositivos suportados são: BlackBerry 5.0, Opera Mini 5.0-6.5 e Nokia Symbian ^3.
  • Grau C: dispositivos com suporte para uma experiência de HTML básica e não aprimorada. Os dispositivos suportados são: smartphones mais antigos, como BlackBerry 4.x, Windows Mobile e outros.

Consulte Recursos para ver uma lista completa de plataformas suportadas pelo jQuery Mobile.

O restante deste artigo trata da estrutura de página do jQuery Mobile, atributos de dados do HTML5 e componentes da UI.


Estrutura de uma página do jQuery Mobile

Como mostra a Lista 1, uma página típica do jQuery Mobile tem três seções: cabeçalho, conteúdo e seção do rodapé.

Lista 1. Página típica do jQuery Mobile
lt;div data-role="page" id="page1">
    <div data-role="header">
       <h1>HEADER</h1>
    </div
    <div data-role="content">
       <p>
       CONTENT AREA
       </p>
    </div>
    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>

Figura 1 mostra a estrutura da Lista 1.

Figura 1. Estrutura de uma página de HTML5 do jQuery Mobile
Estrutura de uma página de HTML5 do jQuery Mobile

Na seção do cabeçalho, normalmente são colocados os cabeçalhos de página e coisas como logotipos. Na seção de conteúdo, são colocados o conteúdo da web específico para o aplicativo e os vários widgets. A seção do rodapé é ótima para fins de navegação.

Para aproveitar os recursos avançados do jQuery Mobile e a sintaxe do HTML, um documento HTML do jQuery Mobile deve definir o tipo de documento HTML5. O restante do documento HTML é formado pelas seções

  • <head> e <body> , onde <head> contém as referências aos temas do jQuery Mobile e do CSS móvel
  • A seção <body> que contém o conteúdo do jQuery Mobile propriamente dito

Lista 2 mostra um exemplo de documento HTML5 do jQuery Mobile.

Lista 2. estrutura de página de HTML5 do jQuery Mobile
//Define the HTML5 doctype:

<!DOCTYPE html> 

// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:

<html> 

<head> 
    <title>Page Title</title> 
	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
min.js"></script>
</head> 

// Define the HTML document <body> that includes the jQuery Mobile elements:

<body> 

<div data-role="page" id="page1">

    <div data-role="header">
       <h1>HEADER</h1>
    </div>

    <div data-role="content">
       <p>
       CONTENT AREA
       </p>

    </div>

    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>
</div>

<div data-role="page" id="page2">
:
:
</div>

</body>
</html>

// The footer can be turned into a navigation bar very easily, as follows:

<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">One</a>
<a href="index.html" data-role="button">Two</a>
<a href="index.html" data-role="button">Three</a>
<a href="index.html" data-role="button">None</a>
</div>            
</div>
</center>

Figura 2 mostra o rodapé da página criada na Lista 2.

Figura 2. Rodapé da página
Rodapé da página

Embora os atributos de página, cabeçalho, conteúdo e rodapé sejam opcionais, é recomendável usá-los — com eles, fica mais fácil seguir as páginas no que diz respeito ao jQuery Mobile.

Páginas únicas, páginas múltiplas e vinculação de páginas

Um único documento HTML pode ter uma ou várias páginas do jQuery Mobile, conforme o indicado pelo atributo data-role="page" . Se há várias páginas, é necessário especificar o atributo ID com um ID de página exclusivo que é usado para vinculação entre páginas internas. Ao carregar um documento HTML com várias páginas, somente a primeira página é mostrada.

O jQuery Mobile usa o Ajax para carregar páginas e, durante esse processo, mostra o spinner de carregamento. Se o carregamento for bem-sucedido, os widgets da UI são aprimorados, a página é incluída no DOM e a animação ou transição de páginas é aplicada.

A vinculação e o carregamento sem o Ajax força a carga a usar HTTP. Você não obterá as transições animadas usando essa abordagem. Use rel="external", data-ajax="false"ou target no link para carregar sem Ajax.


Eventos e métodos suportados

No JavaScript, ao usar o jQuery, é possível fazer referência ao objeto jQuery em si como $ e obter acesso aos recursos do jQuery. A estrutura jQuery Mobile, que amplia o núcleo do jQuery, está disponível por meio do $.mobile, que também dá acesso aos eventos e métodos específicos do jQuery Mobile. Alguns dos eventos e métodos expostos com $.mobile são descritos abaixo.

Eventos

Assim como acontece com outros eventos do jQuery, os eventos do jQuery Mobile são ligados usando as funções live() e bind() . Por exemplo, os eventos de toque incluem dar um toque, dar um toque e manter e vários eventos de deslizar os dedos e de mouse virtual. É possível ligar a mudanças de orientação e eventos de rolagem, como scrollstart e scrollstop. Os eventos de página permitem receber notificações:

  • Antes da criação de uma página
  • Quando uma página é criada
  • Logo antes de mostrar ou ocultar uma página
  • Quando uma página é mostrada e ocultada

Inicializando o jQuery Mobile

Se está familiarizado com o jQuery, sabe que, para executar o código assim que o DOM é carregado, é necessário inicializar dentro da função $(document).ready(). Com o jQuery Mobile, para a inicialização, você liga ao evento pageinit , como mostra a Lista 3.

Lista 3. Ligando ao evento pageint
$( '#welcomePage' ).live( 'pageinit',function(event){
...
});

O evento pageinit é acionado para a página referenciada depois da inicialização de página. Funcionará independentemente do modo de carregamento da página (diretamente ou com o Ajax).

Substituindo os valores padrão do jQuery Mobile

Se você liga ao evento mobileinit , que é acionado quando o jQuery Mobile começa a executar, pode substituir alguns dos valores padrão do jQuery Mobile. A Lista 4 mostra um exemplo. É possível substituir a transição de página padrão, o texto padrão do carregamento de página, o tema padrão do carregamento de página e várias outras coisas.

Lista 4. Inicializando o jQuery Mobile
$(document).bind("mobileinit", function(){
  //apply overrides here
});

Saiba mais sobre os valores padrão do jQuery acessando a página de configuração global do jQuery Mobile (consulte Recursos).

Métodos

O jQuery Mobile também fornece vários métodos com o objeto $.mobile . A Tablela 1 mostra alguns dos métodos disponíveis.

Tablela 1. Métodos do jQuery Mobile
MétodoUso
$.mobile.changePagePara passar programaticamente de uma página a outra. Por exemplo, para acessar a página weblog.php usando uma transição de slide, use $.mobile.changePage("weblog.php", "slide").
$.mobile.loadPagePara carregar uma página externa, aprimore-a com o jQuery Mobile e insira-a no DOM.
$.mobile.showPageLoadingMsgPara mostrar a mensagem de carregamento de página.
$.mobile.hidePageLoadingMsgPara ocultar a mensagem de carregamento de página.
$.mobile.path.isSameDomainUm método utilitário para comparar o domínio de duas URLs.
$.mobile.activePageUma referência à página que está em visualização no momento.

A página de métodos do jQuery Mobile tem mais métodos e utilitários (consulte Recursos).


Widgets e atributos HTML5 data-*

O jQuery Mobile se baseia nos atributos data-* de HTML5 para suportar os vários elementos de UI, transições e estrutura de página. Esses atributos do HTML5 são o segredo da simplicidade do jQuery Mobile. Os navegadores que não suportam HTML5 descartarão os seus atributos silenciosamente.

A lista a seguir mostra o código e as renderizações dos diversos widgets da UI e dos atributos data-* e como usá-los para criar componentes de UI.

  • Página, cabeçalho, conteúdo e rodapé
    Lista 5. Página, cabeçalho, conteúdo e rodapé
    <div data-role="page" id="page1">
        <div data-role="header">
           <h1>HEADER</h1>
        </div
        <div data-role="content">
           <p>
           CONTENT AREA
           </p>
        </div>
        <div data-role="footer">
           <h1>FOOTER</h1>
        </div>
    </div>
    Figura 3. Página, cabeçalho, conteúdo e rodapé
    Página, cabeçalho, conteúdo e rodapé
  • Botão básico
    Lista 6. Botão básico
    <a href="index.html" data-role="button" data-icon="info">Button</a>

    Figura 4. Botão básico
    Botão básico
  • Caixa de seleção
    Lista 7. Caixa de seleção
    <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    <label for="checkbox-0">Checkbox</label>
    Figura 5. Caixa de seleção
    Caixa de seleção
  • Redutível
    Lista 8. Redutível
    <div data-role="collapsible">
       <h3>Header</h3>
       <p>Paragraph...</p>
    
    </div>
    Figura 6. Redutível
    Redutível
  • Abrir um diálogo com transição
    Lista 9. Abrir um diálogo
    <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

    O código na Lista 9 é um hyperlink que abrirá um widget de diálogo com uma transição do tipo "pop". A Figura 7 mostra um exemplo de widget de diálogo.

    Figura 7. Abrir um diálogo
    Abrir um diálogo
  • Acionar a chave de alternância
    Lista 10. Acionar a chave de alternância
    <label for="flip-a">Select slider:</label>
    <select name="slider" id="flip-a" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
    Figura 8. Acionar a chave de alternância
    Acionar a chave de alternância
  • Visualização de lista
    Lista 11. Visualização de lista
    <ul data-role="listview" data-theme="g">
      <li><a href="Friends.html">Friends</a></li>
      <li><a href="SendMessage.html">Send Message</a></li>
      <li><a href="Share.html">Share</a></li>
    </ul>
    Figura 9. Visualização de lista
    Visualização de lista
  • Barra de navegação
    Lista 12. Barra de navegação
    <div data-role="navbar">
       <ul>
           <li><a href="a.html" class="ui-btn-active">One</a></li>
           <li><a href="b.html">Two</a></li>
       </ul>
    </div>
    Figura 10. Barra de navegação
    Barra de navegação
  • Botão de opções
    Lista 13. Botão de opções
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" 
    value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" 
    value="choice-2"  />
            <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3"
    value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>
    </fieldset>
    Figura 11. Botão de opções
    Botão de opções
  • Selecionar (formulário)
    Lista 14. Selecionar (formulário)
    <label for="select-choice-0" class="select">Shipping 
    method:</label>
    <select name="select-choice-0" id="select-choice-1">
       <option value="standard">Standard: 7 day</option>
       <option value="rush">Rush: 3 days</option>
       <option value="express">Express: next day</option>
       <option value="overnight">Overnight</option>
    </select>
    Figura 12. Selecionar (formulário)
    Selecionar (formulário)
  • Régua de controle
    Lista 15. Régua de controle
    <label for="slider-0">Input slider:</label>
    <input type="range" name="slider" id="slider-0" value="60" 
    min="0" max="100" />
    Figura 13. Régua de controle
    Régua de controle
  • Entrada de texto
    Lista 16. Entrada de texto
    <label for="basic">Text Input:</label>
    <input type="text" name="name" id="basic" value=""  />
    Figura 14. Entrada de texto
    Entrada de texto
  • Área de texto
    Lista 17. Área de texto
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    Basic textarea.
    </textarea>
    Figura 15. Área de texto
    Área de texto
  • Grade
    Lista 18. Grade
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    </div>

    Observação:

    • Para fazer duas colunas, use a classe ui-grid-a
    • Para fazer três colunas, use a classe ui-grid-b
    • Para fazer quatro colunas, use a classe ui-grid-c
    • Para fazer cinco colunas, use a classe ui-grid-d
    Figura 16. Grade
    Grade

O atributo data-role é usado para definir os diversos widgets. Entretanto, nem todos os widgets da UI são acionados pelo atributo data-role (por exemplo, selecionar, régua de controle e entrada de texto). Consulte a referência do atributo data- para obter informações mais detalhadas sobre os diversos atributos data-* (consulte Recursos).

Como já foi mencionado, a estrutura jQuery Mobile inclui todos os componentes da UI necessários para desenvolver aplicativos da web móveis e websites completos, como páginas, diálogos, barras de ferramentas, diversos tipos de visualização de lista, uma série de elementos de formulário e botões, etc. Tratamos dos atributos data-* do HTML5 usados para definir os diversos widgets de UI do jQuery Mobile. O restante desta seção trata dos widgets de UI do jQuery Mobile mais comuns.

Diálogos

Os diálogos modais são um tipo essencial de página que pode ser muito útil para alertas ou mensagens para o usuário. Pode-se transformar qualquer página em um diálogo modal incluindo um atributo data-rel="dialog" no link de âncora da página, da seguinte forma.

<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of 
Use</a>

É possível aplicar transições e temas aos diálogos. A página jQuery Mobile Dialog tem mais informações para referência (consulte Recursos).

Visualizações de lista

As visualizações de lista estão entre os elementos de UI mais importantes para os aplicativos remotos. O jQuery Mobile fornece suporte para um conjunto amplo de elementos de visualização de lista, que inclui listas básicas, aninhadas, de botão dividido, numeradas, de bolhas numeradas e listas de ícones. Vamos dar uma olhada no código e nas renderizações de código de algumas visualizações de lista.

  • Lista com links básicos
    Lista 19. Lista com links básicos
    <ul data-role="listview">
      <li><a href="index.html">Acura</a></li>
    </ul>
    Figura 17. Lista com links básicos
    Lista com links básicos
  • Lista aninhada
    Lista 20. Lista aninhada
    <ul data-role="listview">
      <li>
        <h3>Animals</h3>
        <p>All your favorites from aarkvarks to zebras.</p>
          <ul>
            <li>Pets
              <ul>
                <li><a href="index.html">Canary</a></li>
                <li><a href="index.html">Cat</a></li>
                <li><a href="index.html">Dog</a></li>
                <li><a href="index.html">Gerbil</a></li>
                <li><a href="index.html">Iguana</a></li>
                <li><a href="index.html">Mouse</a></li>
              </ul>
            </li>
          </ul>
    </ul>
    Figura 18. Lista aninhada
    Lista aninhada
  • Lista numerada
    Lista 21. Lista numerada
    <ol data-role="listview">
      <li><a href="index.html">The Godfather</a></li>
    </ol>
    Figura 19. Lista numerada
    Lista numerada
  • Lista de botões divididos
    Lista 22. Lista de botões divididos
    <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
      <li>
        <a href="index.html">
        <img src="images/album-ws.jpg" />
        <h3>Elephant</h3>
        <p>The White Stripes</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" 
    data-transition="slideup">Purchase album</a>
      </li>			
    </ul>
    Figura 20. Lista de botões divididos
    Lista de botões divididos

Listas no estilo inserido

O jQuery Mobile suporta todas as suas visualizações de lista como listas no estilo inserido (listas com cantos arredondados) especificando o atributo data-insert , como mostra a Figura 21.

Figura 21. Lista no estilo inserido
Lista no estilo inserido

Lista 23 mostra o código de uma lista no estilo inserido.

Lista 23. Listas no estilo inserido
<ul data-role="listview" data-inset="true">
    <li>
      <a href="index.html">Get Friends</a>
    </li>
    <li>
      <a href="index.html">Post to Wall</a>
    </li>
    <li>
      <a href="index.html">Send Message</a>
    </li>
</ul>

O jQuery Mobile fornece um conjunto amplo de visualizações de lista. Para obter mais informações, consulte a página de visualizações de lista do jQuery Mobile (consulte Recursos).

Formulários

Os formulários são um artefato comum da web para postar informações para um servidor. O jQuery Mobile suporta muitos componentes de UI de formulário: entradas de texto, entradas de procura, régua de controle, acionamento da chave de alternância, botões de opções, caixas de seleção, menus de seleção e formulários de tema. É possível criar todos eles com facilidade. A seção anterior abordou a maioria desses elementos.

O jQuery Mobile fornece um conjunto amplo de elementos de formulário. A Lista 24 mostra um formulário com um menu de seleção e um botão de envio.

Lista 24. Formulário simples e botão de envio
<form action="forms-results.php" method="get"> 
    <fieldset> 
        <div data-role="fieldcontain">
            <label for="select-options" class="select">Choose 
an option:</label>
            <select name="select-options" id="select-options">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option2">Option 3</option>
            </select>
        </div>
        <button type="submit">Submit</button> 
    </fieldset> 
</form>

Os menus de seleção são acionados por <select name="select-options" id="select-options"> nativos, mas o jQuery Mobile melhora a aparência. A instrução <div data-role="fieldcontain"> agrupa os diversos valores para fins de visualização. O formulário em si é definido pelo <form action="..." method="get"> nativo.

Figura 22 mostra o resultado da Lista 24.

Figura 22. Formulário simples com menu de seleção e botão de envio
Formulário simples com menu de seleção e botão de envio

A página de elementos de formulário do jQuery Mobile tem mais informações (consulte Recursos).


Transições de página

O jQuery Mobile suporta várias transições legais baseadas em CSS, listadas na Tablela 2, que podem ser aplicadas a diálogos e páginas.

Tablela 2. Transições baseadas em CSS
TransiçãoUso
fadeEfeito de transição fade in/fade out
popEfeito de transição pop
flipEfeito de transição de inversão
turnEfeito de transição de giro
flowEfeito de transição de fluxo (semelhante ao slide)
slideEfeito de transição de slide (horizontal)
slideupMostra a página ou diálogo deslizando de baixo para cima na página
slidedownMostra a página ou diálogo deslizando de cima para baixo na página
noneSem efeito de transição

Para forçar uma animação específica, inclua o atributo data-transition no link, como mostra a Lista 25.

Lista 25. Inclua o atributo data-transition
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
 data-transition="fade">Search</a>

As transições são aceleradas pelo hardware e requerem o suporte à conversão 3D por parte do navegador. Os dispositivos que não oferecem suporte a 3D retrocederão para o fade.

A página de transições do jQuery Mobile mostra as transições em ação e outras informações relacionadas (consulte Recursos).


Temas e ThemeRoller

Com o jQuery Mobile, é possível usar o atributo data-theme para customizar a aparência do seu aplicativo com temas. O jQuery Mobile fornece um tema padrão e cinco amostras adicionais, com nomes de A até E, como mostra a Tablela 3.

Tablela 3. Temas e estilos
TemaEstilo
Tema padrão
Amostra A
Amostra B
Amostra C
Amostra D
Amostra E

É possível aplicar temas a elementos individuais, como uma página, botão, etc.

Com o aplicativo baseado na web ThemeRoller, mostrado na Figura 23, é possível criar temas para o seu aplicativo da web móvel ou miniwebsite. Também é possível usar o ThemeRoller para desenvolver o seu próprio tema, fazer o download do arquivo de CSS customizado e usá-lo no seu projeto.

Figura 23. ThemeRoller
ThemeRoller

Conclusão

Neste artigo, você aprendeu alguns fundamentos da estrutura jQuery Mobile. Os exemplos deste artigo mostraram como usar as páginas básicas, navegação, barras de ferramentas, visualizações de lista, controles de formulário e efeitos de transição. A estrutura oferece muito mais, inclusive outros métodos e eventos para aplicativos avançados. Com o jQuery Mobile, também é possível usar e customizar widgets. Espero que agora esteja inspirado para escrever UIs de aplicativos da web móveis usando jQuery Mobile.


Download

DescriçãoNomeTamanho
jQuery plugin source codejquerymobileexamplecode.zip2KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Desenvolvimento móvel, Software livre
ArticleID=828922
ArticleTitle=Introdução ao jQuery Mobile
publish-date=08062012