Criando lista com jQuery Mobile – Parte 02
Agora que criamos o básico em listas, podemos estendê-las para tipos mais complexos, que felizmente são facilmente criados. As listas que veremos a seguir são usadas para exibir conteúdo, e não mais menus, como foi visto na parte 1.
Listas com parágrafos
Uma lista com parágrafos pode ser criada através da combinação de tags html h3 e p. No exemplo a seguir, simulamos uma agenda de compromissos:
<!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>
<script type="text/javascript" src="my-jqm-script.js"></script>
</head>
<body>
<div data-role="page" id="primeira">
<div data-role="header" data-theme="b">
<h1>Agenda Semanal</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Segunda <span class="ui-li-count">2</span></li>
<li>
<h3>Compromisso 1</h3>
<p>Blabla blablaba alblab abalablab lab albal bal ala ba</p>
<p class="ui-li-aside"><strong>6:24</strong></p>
</li>
<li>
<h3><a href="">Compromisso 2</a></h3>
<p>Blobloblo aha aha ah ahahah ah ah hfjhd fjhsdf jhsdjfksjkfhjskdjksadhfjs kj sgfs gfhs fhsdgf shadfg</p>
<p class="ui-li-aside"><strong>9:18</strong></p>
</li>
<li data-role="list-divider">Terça <span class="ui-li-count">3</span></li>
<li data-theme="e">
<h3>Compromisso 3</h3>
<p>Blabla blablaba alblab abalablab lab albal bal ala ba</p>
<p class="ui-li-aside"><strong>Agora!</strong></p>
</li>
<li>
<h3>Compromisso 4</h3>
<p>Blobloblo aha aha ah ahahah ah ah hfjhd fjhsdf jhsdjfksjkfhjskdjksadhfjs kj sgfs gfhs fhsdgf shadfg</p>
<p class="ui-li-aside"><strong>9:18</strong></p>
</li>
<li>
<h3>Compromisso 5</h3>
<p>Blabla blablaba alblab abalablab lab albal bal ala ba</p>
<p class="ui-li-aside"><strong>6:24</strong></p>
</li>
<li data-role="list-divider">Quarta <span class="ui-li-count">3</span></li>
<li>
<h3>Compromisso 3</h3>
<p>Blabla blablaba alblab abalablab lab albal bal ala ba</p>
<p class="ui-li-aside"><strong>6:24</strong></p>
</li>
<li>
<h3>Compromisso 4</h3>
<p>Blobloblo aha aha ah ahahah ah ah hfjhd fjhsdf jhsdjfksjkfhjskdjksadhfjs kj sgfs gfhs fhsdgf shadfg</p>
<p class="ui-li-aside"><strong>9:18</strong></p>
</li>
<li>
<h3>Compromisso 5</h3>
<p>Blabla blablaba alblab abalablab lab albal bal ala ba</p>
<p class="ui-li-aside"><strong>6:24</strong></p>
</li>
<!-- continua -->
</ul>
</div>
</div>
</body>
</html>
Este exemplo apresenta o seguinte resultado:
Como podemos ver, o jQm formatou a lista de tags ul, li, h3 e p. Basta sabermos como adicionar cada tag para que a lista seja criada. Como dentro do li criamos um H3, então o jQm coloca o texto em evidência. Se o H3 for um link, será adicionado um botão > para que o link seja executado ao clicar. Veja também que criamos um p com uma classe chamada ui-li-aside que determina um texto no canto direito da tela. Os dividers (data-role=list-divider) também tem um um p com a classe ui-li-count que formatam corretamente um item no canto direito do divisor.
Adicionando uma informação no canto direito
Apenas para reforçar o que foi criado no tópico anterior, o uso da classe ui-li-count adiciona a informação no canto direito da tela, e geralmente é marcada em contraste. Vamos criar outro exemplo:
<!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>
<script type="text/javascript" src="my-jqm-script.js"></script>
</head>
<body>
<div data-role="page" id="primeira">
<div data-role="header" data-theme="b">
<h1>Emails</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
</ul>
</div>
</div>
</body>
</html>
Adicionando ícones
Pode-se adicionar ícones em cada item da lista, bastando apenas adicionar uma imagem ( <img> ) como o primeiro elemento html dentro do <li> e adicionar a classe ui-li-icon. Dê preferencia a ícones 16×16 ou 24×24.
<!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>
<script type="text/javascript" src="my-jqm-script.js"></script>
</head>
<body>
<div data-role="page" id="primeira">
<div data-role="header" data-theme="b">
<h1>Emails</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><img src="http://russian-mascot.com/templates/rus/images/inbox_icon.gif" class="ui-li-icon"/><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><img src="http://russian-mascot.com/templates/rus/images/outbox_icon.gif" class="ui-li-icon"/><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
</ul>
</div>
</div>
</body>
</html>
Se você não adicionar a classe para caracterizar o ícone, a imagem será adicionada normalmente. É útil para exibir imagens maiores.
Até a próxima!
trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site.
