Faltam apenas

Utilizando temas e alterando a aparência do jQuery Mobile

PorDaniel Schmitz em

O jQuery Mobile tem um bom suporte a temas e, de certa forma, consegue combiná-los de um jeito extremamente fácil. Quase todos os componentes do jQm suportam temas, e eles podem ser facilmente modificados através do atributo: data-theme.

Para facilitar ainda mais o uso de temas, ele foi separado em 6 cores distintas, que podem ser utilizadas através das letras: A,B,C,D,E,F. Cada letra representa um tipo de cor, conforme a imagem a seguir:

Resumindo:

  • A: Preto
  • B: Azul
  • C: Branco
  • D: Cinza
  • E: Amarelo

Para usá-lo, vamos usar o atributo data-theme nas tags html. O seguinte código html produz o resultado abaixo:

<!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" 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="index2.html" data-transition="slideup">Item 2</a></li>
<li><a href="#segunda" data-rel="dialog" data- transition="pop">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>

</body>
</html>

Agora vamos alterar o tema do div que segura a página, veja:

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

A partir daí, vai produzir o seguinte resultado:

Veja que agora a barra de títulos ficou azul. Pode-se misturar vários temas em uma única página. Por exemplo:

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

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

<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d">
<li data-role="list-divider">MENU</li>
<li><a href="#segunda">Item 1</a></li>
<li><a href="index2.html" data-transition="slideup">Item 2</a></li>
<li><a href="#segunda" data-rel="dialog" data-transition="pop">Item 3</a></li>
<li><a href="#segunda">Item 4</a></li>
<li><a href="#segunda">Item 5</a></li>
</ul>
</div>
</div>

Produzindo o seguinte resultado:

Como os componentes obedecem aos temas, temos também as seguintes combinações:

Listas

Botões

Barra de título

Barra de botões

Através dessas combinações, podemos criar diversos layouts distintos, bastando apenas usar a criatividade.

Faça seus testes e compartilhe os resultados. Até a próxima!

Deixe um comentário! 5

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. so nao gostei dos bugs que acintecem, antes de ele avancar o item abre um quadrado azul e as vezes da erro de carregamento e tambem em vez de abrir itens ele sobrepoem a imagem para uma cor mais escura tipo com foco sem entrar no item muito bizarro

  2. Olá Daniel, muito interessante seus artigos, parabéns.

    Uma pergunta ,estou procurando o “data-* syntax” para poder saber todos os parametros que posso utilizar, sabe me dizer onde encontro essa documentação completa?

    Obrigado.

    1. data-* eh basicamente um selector custom que vc pode adicionar a qualquer elemento html. o prefixo ‘data’ indica que eh um attributo do usuario, e o resto eh o selector que vc definir. Se eu nao me engano isso faz parte da definicao do html5 mas ja vem sendo usado durante um certo tempo, um exemplo eh a knockoutjs framework que utiliza ‘data-bind’ para definir varios outros atributos e comportamentos de elementos e internamente a framework procura por estes selectors para atualizar o elemento.

  3. Estava tentanto montar um template para a plataforma moodle usand jquery mobile, porém não achei muita documentação sobre o assunto, conhece algum projeto relacionado??

leia mais