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 — 17.768 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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