O widget Panel (painel, em tradução livre) foi criado na versão 1.3.0 do framework jQuery Mobile, lançado em 20 de fevereiro de 2013. Trata-se de uma funcionalidade bastante comum em aplicações para dispositivos móveis.

A interface do Google usa o efeito de painel na sua aplicação para dispositivos móveis. No topo e à esquerda da página de entrada da aplicação existe um ícone que, ao ser tocado, abre um menu com uso de um efeito de deslocamento lateral, ou seja o menu aparece na tela deslizando a partir da lateral esquerda da viewport. Observe na figura abaixo o ícone do menu (mostrado à esquerda na figura). Esse ícone ao ser tocado aciona o painel deslizante (mostrado à direita na figura).

O uso de painel deslizante não está restrito à apresentação de um menu. Podemos usar para apresentar outros conteúdos, tais como barras de ferramentas, formulários, informações adicionais ou qualquer outro conteúdo candidato a apresentação em uma janela de diálogo.

Para criar um painel precisamos de um elemento container com o conteúdo do painel e um elemento para abrir o painel (um link, um botão, um ícone, etc.).

O elemento container deverá ser posicionado na marcação HTML, obrigatoriamente, dentro do container data-role=”page” e antes ou depois de header, content e footer.

Ao elemento container (um div, por exemplo) atribuímos o par atributo/valor data-role=”panel” e id=”valor”, sendo valor um nome de livre escolha do autor.

Ao elemento que ao ser clicado/tocado abre o painel atribuímos o atributo href com um valor igual ao valor escolhido para o id do container precedido do sinal tralha (#).

Para criar um elemento de fechamento dentro do painel basta a ele atribuir o par atributo/valordata-rel=”close” e hrefapontando para a página de onde foi aberto o painel.

O autor poderá optar pela abertura do painel a partir do lado esquerdo ou direito. Para definir o lado de abertura basta declarar o par atributo/valor igual a data-position=”left” (valor padrão) ou data-position=”right” respectivamente, para o container do painel.

Estão previstos três tipos de efeito de abertura do painel. Os efeitos são definidos pelo autor com a declaração do atributo data-display e seus valores reveal(valor padrão), overlay e push.

O efeito revealfaz com que o container da página deslize para o lado e revele o painel; o efeito overlayfaz com que o painel deslize de um dos lados e se sobreponha à página e o efeito pushfaz com que o painel empurre o conteúdo da página para um dos lados e se revele.

Consulte uma página exemplo (abre em nova janela) demonstrando essa nova e fantástica funcionalidade da jQuery Mobile.

URL encurtada para visualização do exemplo em dispositivo móvel http://goo.gl/dTdGw.

***

Oferta exclusiva para os leitores iMasters deste artigo: todos os livros do Maujor com 25% de desconto no site da Novatec Editora! Insira o código promocional maujor25 no carrinho de compras para gerar o desconto. (Válido até 06/07/2013)