Design Up
Ola Visitante, Seja bem vindo ao DesignUp, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades.

Vale tambem ressaltar que durante seu acesso caso vc veja algum assunto sem nexo algum não se preucupe, é que alguns de nossos conteudos são exclusivos para membros, entao não perca tempo, cadastre-se e tenha acesso completo ao forum.

Att. Rafael Ribeiro
Equipe DesignUp
Escolha o tema
  

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Últimos assuntos
Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Top dos mais postadores
Antunes Marcelo™ (2685)
 
Rafael Ribeiro (1442)
 
bru5no (1407)
 
San (978)
 
abandonei rs' (213)
 
Banned+ (143)
 
michellgomes (138)
 
Micheel (132)
 
Kotoquinho (125)
 
Dexter (87)
 

Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Parceiros
Fórum grátis


iZiTech
Contador de Visitas
contador free
Facebook

Criando a primeira página Mobile Com Jquery

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Criando a primeira página Mobile Com Jquery

Mensagem por michellgomes em Sab Jan 14, 2012 9:21 pm

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:
Código:
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>

<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>


</body>
</html>

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:
Código:
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>

AQUI

</body>
</html>

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:


[Você precisa estar registrado e conectado para ver este link.]

_________________
avatar
michellgomes
VIP
VIP

Câncer
Mensagens : 138
Pontos : 180
Agradecimentos : 2
Data de inscrição : 28/08/2010
Idade : 21
Localização : Paraná

Outras Informações
Ocorrencias:
10/10  (10/10)

Ver perfil do usuário http://michelgomes.ueuo,com http://logoff.ueuo.com

Voltar ao Topo Ir em baixo

Re: Criando a primeira página Mobile Com Jquery

Mensagem por Rafael Ribeiro em Sab Jan 14, 2012 9:32 pm

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

_________________
[Você precisa estar registrado e conectado para ver este link.]
avatar
Rafael Ribeiro
Administrador
Administrador

Libra
Mensagens : 1442
Pontos : 3001
Agradecimentos : 117
Data de inscrição : 29/05/2010
Idade : 31
Localização : Moreno-PE

Outras Informações
Ocorrencias:
0/10  (0/10)

Ver perfil do usuário http://designup.forumeiros.info

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum