jQuery Mobile Popups
Popups são semelhantes para diálogos, em que ambos sobreposição de uma parte de uma página. Uma caixa de pop-up pode ser útil quando você deseja exibir texto pequeno, fotos, mapas ou outros conteúdos.
Para criar um pop-up, começar com uma <a> elemento e um <div> elemento. Adicionar a data-rel="popup" atributo para <a> , e data-role="popup" atribuir a <div> . Em seguida, especifique um ID para <div> e defina a href de <a> para coincidir com o especificado id. O conteúdo dentro <div> é o conteúdo real que irá aparecer quando um usuário clica no link.
Nota: O pop-up <div> deve estar dentro da mesma página que o link.
Exemplo
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Tente você mesmo " Se você quiser alguma cobertura extra ea margem na sua caixa de pop-up, adicione o "ui-content" classe para <div> :
fechando Popups
Por padrão, pop-ups pode ser fechado clicando fora da caixa de pop-up ou pressionando o "Esc" chave. Se você não quer que o pop-up para ser closable clicando fora da caixa, você pode adicionar o data-dismissible="false" atributo para o pop-up (não é realmente recomendado). Você também pode adicionar um botão próximo ao pop-up, colocou a direita ou esquerda. Para fazer isso, adicionar um link botão com a data-rel="back" atributo para o recipiente de pop-up, e posicione o botão de classes CSS.
| Descrição | Exemplo |
|---|---|
| botão de fechar direita | Tente |
| botão para fechar a esquerda | Tente |
| Popup Undismissible | Tente |
posicionamento Popups
Por padrão, popups aparece diretamente sobre o elemento clicado. Para controlar a posição do pop-up, use os dados-posição para atribuir no link que é usado para abrir o pop-up.
Há três maneiras de posicionar o pop-up:
| valor do atributo | Descrição |
|---|---|
| data-position-to="window" | Irá aparecer centrado dentro da janela |
| data-position-to="#myId" | Popup é posicionado sobre o elemento com um #id especificado |
| data-position-to="origin" | Padrão. Popup está posicionado diretamente sobre o elemento clicado |
Exemplo
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> Tente você mesmo " transições
Por padrão, popups não tem nenhum efeitos de transição adicionados a eles. Você pode usar qualquer um dos efeitos que nós introduzimos no capítulo "Transitions". Basta aplicar o transição de dados = atributo "valor" para o link que abre o pop-up:
Uma demonstração de todos os efeitos de transição disponíveis
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Tente você mesmo " setas Popup
Para adicionar uma seta para a borda do pop-up, use o atributo de seta de dados e especificar o valor "l" (left), "t" (top), "r" (right) ou "b" (bottom) :
Exemplo
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Tente você mesmo " Diálogos
Você pode adicionar marcação de diálogo padrão em um pop-up (cabeçalho, conteúdo e marcação de rodapé):
Exemplo
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Tente você mesmo " Popup Fotos
Você também pode exibir imagens em um pop-up:
Exemplo
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Tente você mesmo " Nota: Popups não são ideais quando você tem um conjunto de imagens que você deseja exibir (como um álbum com 500 imagens). No entanto, para um par de imagens que necessitam de ser vistos maior - eles são perfeitos.
Popup Overlay
Você pode controlar a cor de fundo por trás do pop-up (a própria página) com a data-overlay-theme de atributo.
Por padrão, a sobreposição é transparente. Use data-overlay-theme="a" para adicionar uma sobreposição de luz e-sobreposição-tema de dados = "b" para adicionar uma sobreposição escura:
Exemplo
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Tente você mesmo " O efeito de sobreposição é usada frequentemente em fotos de pop-up:
Exemplo
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Tente você mesmo " Nota: Você também vai aprender a usar popups em formas e modos de exibição lista em capítulos posteriores.