Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

O widget Panel da jQuery Mobile

Publicado em: 2013-03-19 — 22.269 visualizacoes

panel-jquery-mobile

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.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

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.

9 comentários na matéria: “O widget Panel da jQuery Mobile”

  1. Renda ExtraNo Gravatar disse:

    obrigado por compártilhar essa dica abraços

  2. Fabio F CunhaNo Gravatar disse:

    Muito boa a dica. Os livros do Maujor são muito bons.
    Estou gostando muito de usar JQuery e JQuery Mobile.

  3. Dicas de SEONo Gravatar disse:

    Gostei, vou instalar agora mesmo !

  4. ClaytonNo Gravatar disse:

    Opa. Mto boa dica!
    Eu tenho uma dúvida.
    Tem como fazer um menu que possa rolar somente ele, sem o site todo mecher, caso esse menu for maior que a tela?

  5. sat fiscalNo Gravatar disse:

    O elemento container parece ser bem interessante.

  6. vestido de festa - vastiNo Gravatar disse:

    O mobile veio certamente para ficar. Só tende a crescer.

  7. Thiago VieiraNo Gravatar disse:

    Um bem bacana que eu trabalhei foi este feito em HTML5 e CSS3.
    http://fiddle.jshell.net/thatschris/PPZ8b/83/

  8. Thiago VieiraNo Gravatar disse:

    Um bem bacana que eu trabelhei foi este feito em HTML5 e CSS3.
    http://fiddle.jshell.net/thatschris/PPZ8b/83/

  9. Márcio GomesNo Gravatar disse:

    Ótima dica, mestre! Abraços.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo