Painéis jQuery Mobile
Painéis em jQuery Mobile vai deslizar para fora, pelo lado esquerdo ou do lado direito da tela com conteúdo adicional.
Para criar um painel, adicionar o data-role="panel" atributo para um <div> elemento e especificar um id .
Adicionar qualquer marcação HTML dentro desta <div> que você deseja exibir no seu painel:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Nota: A marcação do painel deve ser colocado antes ou após o cabeçalho, conteúdo e rodapé dentro de uma página jQuery Mobile.
Para acessar o painel, criar um link que aponta para o id do painel <div> . Quando um usuário clica no link, o painel irá abrir:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Aqui está um exemplo do painel de base:
Exemplo
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> Tente você mesmo " Painéis de fechamento
Você pode fechar o painel clicando fora dela, passando ou pressionando o Esc chave. Você pode desativar o clique e características swiping adicionando adicionais data-* atributos para o painel <div> :
| Atributo | Valor | Descrição | Exemplo |
|---|---|---|---|
| data-dismissible | true | false | Especifica se o painel pode ser fechada clicando fora dela, ou não | Tente |
| data-swipe-close | true | false | Especifica se o painel pode ser fechada deslizando, ou não | Tente |
Você também pode fechar o painel usando um botão: Basta adicionar um link dentro do painel <div> com a data-rel="close" atributo ligado a ele. E por razões de compatibilidade, você também deve especificar o href atributo para apontar para o ID da página, o usuário deve ir para quando fechar o painel:
Exemplo
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> Tente você mesmo " painel de Visualização
Você pode controlar o modo do painel com o atributo de exibição de dados de exibição:
| atributo Valor | Descrição |
|---|---|
| data-display="overlay" | Exibe o painel sobre o conteúdo, |
| data-display="push" | Anima tanto o painel e na página ao mesmo tempo |
| data-display="reveal" | Padrão. O painel irá sentar-se sob a página e revelam como a página desliza afastado |
Exemplo
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > Tente você mesmo " Painéis de posicionamento
Por padrão, os painéis irão aparecer no lado esquerdo da tela. Para o painel para aparecer no lado direito da tela, especifique a data-position="right" atributo.
Você também pode especificar como o conteúdo do painel devem ser posicionados de acordo com o resto da página quando o usuário começa a rolar. Por padrão, o painel irá rolar com a página (mas o conteúdo do painel irá permanecer no topo da página). Se você sempre deseja exibir o conteúdo do painel, não importa o quão longe você rolar a página, adicionar a data-position-fixed="true" atributo para o painel: