Criando a primeira página Mobile Com Jquery

O jQueryMobile usa o já conhecido HTML para criar suas páginas. A única diferença é que ele usa HTML 5 com recursos extras chamados de "data driven" - em resumo, usa constantemente o atributo "data". Vamos a um simples exemplo, e como não poderia ser diferente, iremos criar o Hello World, veja:

Código:

<div data-role="page">
    <div data-role="header">
        <h1>Hello World</h1>
    </div>

    <div data-role="content">   
        <p>Aqui entra o conteúdo</p>      
    </div>
</div>

Este pedaço de código HTML deve ser inserido entre a tag do nosso modelo.

Codigo Completo

Spoiler:

Ao salvar e exibir esta página no navegador (com webkit: iOS, iPhone, Chrome, Firefox, Opera, exceto IE), temos a seguinte renderização:

A mágica acontece porque estamos usando o atributo data-role para informar qual a função daquele div. No div pricipal, definimos o data-role como page, e no div interno ao page, criamos mais duas divs, que é o header e o content.

Criando duas páginas mobile com transição
Estendendo um pouco o conceito sobre o JQM, vamos agora criar duas páginas mobile e linkar uma a outra. Uma característica importante que devemos observar é que duas páginas mobile não necessitam obrigatoriamente de dois arquivos HTML. Vamos fazer as páginas no mesmo arquivo html. O código é o seguinte:

Código:

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

    <div data-role="header">
        <h1>Hello World</h1>
    </div>

    <div data-role="content">   
        <p>Aqui entra o conteúdo</p>      
        <p>Acesse a segunda página: <a href="#segunda">aqui</a></p>   
    </div>

    </div>

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

    <div data-role="header">
        <h1>Segunda página</h1>
    </div>

    <div data-role="content">   
        <p><a href="#primeira"  data-rel="back">Primeira página</a></p>   
    </div>

</div>

Lembreçe este código deve ser incorporado a este:

Spoiler:

Veja que agora criamos dois divs, cada um com seu data-role. Veja também que criamos um id para cada div, com o propósito de linkar cada uma das páginas. Na primeira página, em content, fazemos um link com o uso do href e apontando diretamente para #segunda. Ou seja, o link aponta para o id da outra div.

Veja agora no navegador que, quando acessamos o link, surge uma transição para a segunda página. Nesta segunda página, veja que o botão back é automaticamente criado. Ao acessá-lo, a página volta para a #primeira.


Veja que no link da segunda página para a primeira, usamos o data-rel para indicar que estamos voltando uma página. Experimente retirá-lo e verificar o seu comportamento.

Criando um simples menu
Agora vamos criar um simples menu de itens. Para isso, usamos o já conhecido

Código:

<ul> <li>

e claro mais alguns atributos data, veja:

Código:

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

    <div data-role="header">
        <h1>Hello World</h1>
    </div>

    <div data-role="content">   
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">MENU</li>
            <li><a href="#segunda">Item 1</a></li>
            <li><a href="#segunda">Item 2</a></li>
            <li><a href="#segunda">Item 3</a></li>
            <li><a href="#segunda">Item 4</a></li>
            <li><a href="#segunda">Item 5</a></li>
        </ul>
    </div>

    </div>

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

    <div data-role="header">
        <h1>Segunda página</h1>
    </div>

    <div data-role="content">   
        <p><a href="#primeira"  data-rel="back">Primeira página</a></p>   
    </div>

</div>

Lembreçe de incorporar ao código citado ali em cima

Agora, na primeira página, criamos um

Código:

 <ul>

cujo o data-role é listview. O atributo data-inset faz com que o menu não fique "grudado" em toda a página. Retire-o para ver a diferença. Depois criamos os itens de menu com o uso do

Código:

<li>

. Este código produz o seguinte resultado:

muito com mano, parabéns pelo post...