Artigos HTML e CSS jQuery Mobile: Conhecendo os principais elementos de layout

Introdução

Nesse artigo vamos falar sobre jQuery Mobile Framework, sobre como criar múltiplas páginas, botões, formulários, listas e outros elementos básicos. Primeiramente vamos ver um exemplo de página básica criada com o jQuery Mobile e depois começaremos a trabalhar com os atributos para adicionarmos outros elementos à nossa página.

Listagem 1: Layout Básica usando jQuery Mobile 

        <html>
        <head>

        <title>jQuery Mobile - Macoratti .net</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

        </head>
        <body>
        <div data-role="page">
        <div data-role="header">
        <h1>cabeçalho</h1>
        </div><!-- /header -->

        <div data-role="content">
        <p>Corpo</p>
        </div><!-- /content -->

        <div data-role="footer">
        <h4>Rodape</h4>
        </div><!-- /footer -->
        </div><!-- /page -->
        </body>
        </html>
Resultado do exemplo de estrutura básica
Figura 1: Resultado do exemplo de estrutura básica

Com esse exemplo acima obtivemos uma página com cabeçalho, corpo e rodapé. Agora vamos começar a adicionar outros elementos dentro desse mesmo HTML.

Múltiplas páginas

Nesse mesmo HTML podemos incluir diversos blocos de páginas básicas e assim teremos um arquivo HTML com varias páginas, cuja estrutura é chamada de “multipáginas”. Mas é bom ressaltar que isso não quer dizer que com jQuery Mobile tenhamos que criar sempre todas as páginas do website dentro do mesmo arquivo HTML. Se desejarmos podemos organizá-las em arquivos separados, ou até mesmo fazermos uma mistura entre páginas multipáginas e páginas básicas em diferentes arquivos HTML.

Como podemos notar, nessa página básica se encontram arquivos de script JavaScript e estilos CSS do framework e também a tag META que usamos para definirmos a escala ou zoom na qual se deverá apresentar. Tudo isso continuará da mesma maneira que o layout básico, nesse arquivo a única coisa que vamos mudar é o corpo da página, onde vamos adicionar vários blocos data-role="page".

Agora vamos criar um exemplo que possuirá as seguintes características

  • Página principal
  • Página 2
  • Página 3
  • Link para página 2
  • Link para página 3
  • E ambas as páginas possuem um link voltar, que volta para página principal
Listagem 2: Exemplo Multipáginas 

        <html>
        <head>

        <title>jQuery Mobile Multipáginas</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

        </head>
        <body>
        <!-- P[agina Principal -->
        <div data-role="page" id="principal">
        <div data-role="header">
        <h1> Cabeçalho - Página principal.</h1>
        </div>
        <div data-role="content">
        <p> multipágina jQuery Mobile </p>
        <p> Ir página 2 <a href="#pagina2"> Segunda Página </a> </p>
        <p> ir página 3 <a href="#pagina3" data-rel="dialog"> Terceira Página </a> </p>
        </div>
        <div data-role="footer">
        Rodapé
        </div>
        </div>
        <!-- Fim página Principal. -->
        <!-- Página 2 -->
        <div data-role="page" id="pagina2" data-title="Exemplo página 2">
        <div data-role="header">
        <h1> Exemplo Página 2 </h1>
        </div>
        <div data-role="content">
        <p> com esse exemplo podemos ver as multipáginas</p>
        <p> <a href="#principal">Voltar</a></p>
        </div>
        <div data-role="footer">
        Rodapé
        </div>
        </div>
        <!-- Fim Página 2 -->
        <!-- Página 3 -->
        <div data-role="page" id="pagina3" data-title="Exemplo página 3">
        <div data-role="header">
        <h1> Exemplo Página 3 </h1>
        </div>
        <div data-role="content">
        <p> Página 3 final. </p>
        <p> <a href="#principal">Voltar</a></p>
        </div>
        <div data-role="footer">
        Rodapé
        </div>
        </div>
        <!-- Fim página 3 -->
        </body>
        </html>

Assim construímos as três páginas dentro do mesmo HTML e o jQuery se encarrega de apresentar como se fossem páginas separadas. A navegação entre elas foi realizada através de links.

Vamos entender como isso funciona. Para começo já sabemos que as páginas são ligadas através de links, mesmo estando dentro do mesmo arquivo HTML.

Links: funcionam porque cada uma das páginas básicas do sistema multipáginas possui um Id, que é definido na DIV principal da página, a que tem “data-role=”page””. Veja o exemplo do código para definir o Id.

Listagem 3: Definindo ID 

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

Como podemos, notar foi colocado id=”Principal”, assim essa div já tem um nome atribuído a ela. Agora, se quisermos fazer um link para esse indicador vamos simplesmente criar um link como se fosse um link interno (âncora). Para isto colocamos o href=”#principal”, ou seja, exatamente como fizemos no nosso exemplo de multipáginas anterior.

Listagem 4: Link a um indicador 

        <a href="#principal">Voltar</a>

Titulos: Já que todas as nossas páginas estão no mesmo arquivo HTML, elas compartilham do mesmo titulo definido na dentro da tag HEAD. Mas com certeza queremos que cada uma possua seu titulo individualmente. E para que isso seja possível, o jQuery Mobile possui o atributo data-title que é colocado no div principal de cada uma das páginas

Na tag data-title podemos indicar o titulo que cada página deve possuir e o jQuery Mobile e responsabilizara de atualizar automaticamente quando se navegar nessas páginas. A seguir temos um exemplo de definição do titulo da página 2.

Listagem 5: Titulo da página 

        <div data-role="page" id="pagina2" data-title="Exemplo página 2">

Dessa forma, quando o usuário clicar no link que o levará a essa página, o titulo da janela do navegador mudará automaticamente para o que indicamos no atributo data-title="Exemplo página 2".

Ao vermos o exemplo em funcionamento, podemos observar que utilizamos dois tipos de comportamento dinâmicos.

  • As transações entre páginas, usando um efeito de deslocamento suave.
  • A mudança de titulo (TITLE) automática do documento, ao irmos de uma página para a outra.
Exemplo multipágina – Página principal
Figura 2: Exemplo multipágina – Página principal
Exemplo multipágina – Página 2
Figura 3: Exemplo multipágina – Página 2
Exemplo multipágina – Página 3
Figura 4: Exemplo multipágina – Página 3

Temas

Para definirmos os temas, utilizamos o atributo data-theme e pode ser aplicado ao cabeçalho, rodapé, conteúdo ou às divs que possuam o atributo data-role="page", para garantir que a cor de fundo será aplicada à página toda. Quando fazemos isso todos os widgets na página irão receber o tema especificado também. Vejamos exemplos de temas abaixo.

Listagem 6: Exemplo de uso do theme 

        <html>
        <head>

        <title>jQuery Mobile - Macoratti .net</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

        </head>
        <body>
        <div data-role="page" data-theme="a">
        <div data-role="header"data-theme="a">
        <h1>cabeçalho</h1>
        </div><!-- /header -->

        <div data-role="content" data-theme="a">
        <p>Corpo</p>
        </div><!-- /content -->

        <div data-role="footer" data-theme="a">
        <h4>Rodape</h4>
        </div><!-- /footer -->
        </div><!-- /page -->
        </body>
        </html>
Exemplo com o tema A
Figura 5: Exemplo com o tema A

Para alterarmos o tema basta mudarmos a letra dentro da tag “data-theme”, podemos usar de A a E.

Exemplo com o tema E
Figura 6: Exemplo com o tema E

Botões

Ao utilizarmos jQuery Mobile, adquirimos uma forma simples de criarmos os botões através de uma série de propriedades e atributos que vem pré-configurados no framework. E o melhor de tudo é que para isso precisamos utilizar poucas linhas de código no nosso HTML.

Uma outra coisa interessante a ressaltar é que para criarmos nossos botões não necessitamos fazer a criação de scripts, pois a criação é feita diretamente em nosso código HTML. Conseguimos isso com o seguinte código.

Listagem 7: Exemplo de código de um botão 

        <a href="#" id ="boton" data-role="button" >Este é um botão simples com jQM</a>

Essa linha de código pode ser inserida dentro daquele exemplo que criamos de multipáginas, alterando os links por botões da seguinte maneira. Trocando a seguinte linha de código:


        <p> Ir página 2 <a href="#pagina2"> Segunda Página </a> </p>

Pelo código abaixo.

Listagem 8: Botão dentro da multipágina 

        <a href="#pagina2" id ="botao1" data-role="button" >página 2</a>

Assim obteremos o seguinte resultado.

Alterando link por botão
Figura 7: Alterando link por botão

Como podemos observar, agora temos o botão para ir à pagina 2 e continuamos tendo o link para ir para a página 3. Mas podemos alterar todos os links por botões normalmente, neste exemplo efetuamos a mudança apenas do botão para página 2, para podemos ter noção da diferença.

Como podemos ver, foi extremamente fácil criar nosso botão. A única coisa que tivemos de fazer foi atribuir o valor “button” ao atributo data-role do nosso link. Também podemos fazer isso com um botão criado através de inputs, onde o código ficaria da seguinte forma.

Listagem 9: Exemplo de botão usando input 

        <input type="button" data-role="button" value="Botão input"/>
Resultado botão input
Figura 8: Resultado botão input

Isso significa que podemos facilmente criar um botão submit estilizado para enviarmos formulários, nos ajudando a sair do clássico e convencional botão HTML, conseguirmos isso com o seguinte código.

Listagem 10: Exemplo botão submit 

        <input type="submit" data-role="button" value="Botão imput type submit"/>
Botão input de type submit
Figura 9: Botão input de type submit

Uma das coisas comuns com os botões é que eles ocupam o tamanho completo da tela independente a largura da mesma. Porém muitas vezes não queremos que esse botão ocupe toda a largura, então usando o jQuery Mobile existe uma maneira muito simples em que esses elementos se ajustam ao tamanho do texto que levam como value. A maneira de criação é igual à de um botão padrão, apenas temos a necessidade de alterar alguns atributos no mesmo código HTML, da seguinte maneira.

Listagem 11: Botão tamanho do texto 

        <a href="#" data-role="button" data-inline="true" >botao com maior quantidade de
        texto</a><br>
        <a href="#" data-role="button" data-inline="true" >botão com texto médio</a><br>
        <a href="#" data-role="button" data-inline="true" >botão </a><br>

Se repararmos o código acima, a única coisa que tivemos que inserir a mais foi a data-inline=”true”, com o propósito de fazer com que o botão se limite ao tamanho do texto

Tamanho do botão conforme Value
Figura 10: Tamanho do botão conforme Value

Dessa maneira conseguimos perceber que quanto menor o texto menor o tamanho do botão.

Agora uma coisa interessante de fazermos é mudarmos a cor dos botões, para podemos personalizar de acordo com as necessidades ou gosto e não ficarmos com os que vem de maneira pré-determinada. Como já podemos notar, tudo é feito de maneira muito simples no jQuery Mobile e para isso precisamos apenas adicionar mais um atributo ao nossos botões.

Listagem 12: Mudando a cor do botão 

        <a href="#" data-role="button" data-inline="true" data-theme="e" >Este botao e de outra cor</a>

O que fizemos aqui foi adicionar o atributo data-theme=”e”, onde o “E” poderia ser substituído por uma letra de A a E.

Alterando cor do botão
Figura 11: Alterando cor do botão

Como podemos ver na Figura 11, o único botão que sofreu alteração foi o botão onde incluímos o atributo data-theme=”e”. Para modificarmos o tema de todos os botões teríamos que estar adicionando esse mesmo atributo em todos os outros e até mesmo nas divs, como já foi falado, assim alterando o tema de todo nosso layout.

Listas

As listas são alguns dos componentes de interface do usuário mais eficientes e úteis no jQuery Mobile, já que podemos as utilizar como menu de contextos, ou qualquer outro uso que quisermos em nossa aplicação web.

Vamos iniciar criando uma lista simples usando as pré-definições do jQuery Mobile, para isso temos que utilizar o seguinte código em nosso documento HTML.

Listagem 13: Lista simples 

        <ul data-role="listview">
        <li><a href="#pagina1">Página 1</a></li>
        <li><a href="#pagina2">Página 2</a></li>
        <li><a href="#pagina3">Página 3</a></li>
        </ul>

Com isso conseguimos criar uma lista simples, onde seus elementos estão servindo de link para acessarmos três páginas. Cada página está ligada a um elemento da lista, ou seja, se clicarmos no elemento com o texto “Página 1”, o navegador nos levaria até essa página.

Lista simples
Figura 12: Lista simples

Agora vamos criar mais um exemplo de lista, nesse caso uma lista com divisórias onde essas divisórias podem nos servir para separar temas, tipos de grupo, etc.

Listagem 14: Lista com divisores 

        <body>
        <div data-role="header">
        <h1>Cabeçalho</h1>
        </div>
        <ul data-role="listview" >
        <li data-role="list-divider">Artigos </li>
        <li><a href="#jQM" >JQuery Mobile</a></li>
        <li><a href="#delphi" >Delphi</a></li>
        <li data-role="list-divider">Curso em andamento</li>
        <li><a href="#html">HTML</a></li>
        <li><a href="#JavaScript">JavaScript</a></li>
        </ul>
        <div data-role="footer">
        Rodapé
        </div>
        </body>

É outra forma muito prática de criarmos uma lista, a única coisa que tivermos que fazer foi agregar dois elementos <li> na mesma posição onde desejamos ter nossos divisores, mas nestes elementos tivemos que definir o atributo data-role=”list-divider”, isso é o suficiente para criarmos um divisor.

Lista com divisores
Figura 13: Lista com divisores

Mais uma coisa interessante que podemos estar adicionando em nossas listas são as margens, pois como podemos ver, as nossas listas ocupam completamente a largura da tela independente de qual seja a resolução. Se desejarmos podemos adicionar essa margem através de um novo atributo da nossa lista que é inserido dentro da tag <ul>. Esse atributo é o data-inset que recebe um valor boleano, ou seja, apenas verdadeiro ou falso. Para produzirmos as margens temos que definir o valor desse atributo como true, dessa forma obteremos uma lista que criará certas margens em relação à página, além de criar uma borda arredondada. Podemos fazer isso com o seguinte código.

Listagem 15: Definindo margem a lista 

        <ul data-role="listview" data-inset="true">
Exemplo de lista com margens
Figura 14: Exemplo de lista com margens

Vou ficando por aqui com mais este artigo. Como sempre é uma grande satisfação poder compartilhar informações com vocês leitores. Nos veremos em breve com mais um artigo, até lá, deixem seus comentários, dúvidas e temas para novos artigos.

Um grande abraço a todos.