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 mostrado no início deste post 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/valor data-rel="close" e href apontando 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 reveal faz com que o container da página deslize para o lado e revele o painel; o efeito overlay faz com que o painel deslize de um dos lados e se sobreponha à página e o efeito push faz 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.

Esta matéria foi publicada em: 2013-03-19 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2013/03/19/o-widget-panel-da-jquery-mobile/trackback no seu site.