Criando toolbars com jQuery Mobile

A maioria das aplicações para mobile necessita de uma toolbar para adicionar botões de ação na tela. No jQuery Mobile é possível criar toolbars tanto no cabeçalho quanto no rodapé, e também na barra de títulos.

Adicionando um botão na barra de títulos (header)

Quando definimos o data-role=”header” criamos, internamente a ele, um título com o uso do <h1>. Podemos adicionar um botão neste cabeçalho apenas adicionando um link <a href…., e, de acordo com a ordem de posicionamento dos elementos, os botões serão adicionados. Também podemos adicionar ícones, que já são pré configurados pelo jQm. Para adicionar botões na esquerda ou direita, usamos as classes ui-btn-left e ui-btn-right.

Este exemplo cria dois botões:

<div data-role="header" data-position="inline">
    <a href="index.html" data-icon="delete" class="ui-btn-left">Cancel</a>
        <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check" class="ui-btn-right">Save</a>
</div>

Adicionando botões na barra de status (footer)

O mesmo pode ser aplicado em um data-role=”footer”, mostrando os ícones na barra de status da tela, por exemplo:

<div data-role="footer" class="ui-bar">
    <a href="index.html" data-role="button" data-icon="delete">Remove</a>
    <a href="index.html" data-role="button" data-icon="plus">Add</a>
    <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
    <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

Criando uma NavBar

A navbar é um conjunto de botões que podem ser adicionamos em qualquer parte da tela. A navbar é criada a partir do atributo data-role=”navbar”. No exemplo a seguir, criamos uma navbar abaixo da barra de título:

<div data-role="header">
        <h1>My Twitter</h1>
        <a href="index.html" data-icon="gear" class="ui-btn-right">Opções</a>

        <div data-role="navbar">
            <ul>
                <li><a href="#">Meus</a></li>
                <li><a href="#">Seguidores</a></li>
                <li><a href="#">Direct Message</a></li>
            </ul>
        </div>
    </div>

Veja que os três itens do navbar aparecem logo abaixo da barra da barra de título. lembra do data-icon? Você pode usá-los aqui aqui também, bastando apenas informar qual ícone quer acrescentar:

<div data-role="header">
    <h1>My Twitter</h1>
    <a href="index.html" data-icon="gear" class="ui-btn-right">Opções</a>

    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="star">Meus</a></li>
            <li><a href="#" data-icon="gear">Seguidores</a></li>
            <li><a href ="#" data-icon="grid">Direct Message</a></li>
        </ul>
    </div>
</div>

Data icons

A propósito, os ícones que estão pré configurados para o jQm estão descritos nesta página

Fixar o navbar

Para que o Navbar fique fixo na tela, ou seja, quando o usuário realizar o scroll na tela o navbar continue na mesma posição, use o atributo data-position=”fixed”

Deixe seu comentário, e até o próximo artigo!