dialog fornecida pela extensão page.dialog do widget página permite que você estilize uma página como um diálogo, no entanto, o manuseio especial de navegação será removido. Você também pode considerar implementar diálogos usando widgets popup.Ainda página pode ser apresentada como um diálogo modal adicionando o atributo data-rel="dialog" ao link de âncora da página. Quando o atributo “diálogo” é aplicado, o framework adiciona estilos para adicionar cantos arredondados, margens ao redor da página e um fundo escuro para fazer o “diálogo” parecer suspenso acima da página.
|
1
|
|
Pode abrir um diálogo programmaticamente chamando o $.móvel.método changePage:
|
1
2
3
4
4
5
|
|
Transições
Por defeito, o diálogo será aberto com uma transição ‘pop’. Como todas as páginas, você pode especificar qualquer transição de página que quiser no diálogo, adicionando o atributo data-transition ao link. Para que se sinta mais parecido com o diálogo, nós recomendamos especificar uma transição de “pop”, “slidown” ou “flip”.
Os valores possíveis incluem: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidefown, none.
|
1
|
|
Closing dialogs
Quando qualquer link é clicado dentro de um diálogo, a estrutura fechará automaticamente o diálogo e fará a transição para a página solicitada, tal como se o diálogo fosse uma página normal. No entanto, os diálogos também podem ser encadeados, como explicado abaixo em “Diálogos Encadeados”. Da mesma forma, um link que abre um popup também deixará o diálogo no lugar.
Se o diálogo tiver um cabeçalho, a estrutura irá adicionar um botão de fechamento no lado esquerdo do cabeçalho. Você pode alterar a posição adicionando data-close-btn="right" ao caixa de diálogo. Se você não quiser um botão fechar no cabeçalho ou adicionar um botão fechar personalizado, você pode usar data-close-btn="none".
Para criar um botão “cancelar” em uma caixa de diálogo, basta criar um link para a página que acionou a caixa de diálogo para abrir e adicionar o atributo data-rel="back" ao seu link. Este padrão de link para a página anterior também é utilizável em dispositivos não-JS.
Para links gerados por JavaScript, você pode simplesmente definir o atributo href como “#” e usar o atributo data-rel="back". Você também pode chamar o método close() da caixa de diálogo para fechar programmaticamente as caixas de diálogo, por exemplo: $( ".ui-dialog" ).dialog( "close" ).
Configurando o texto do botão fechar
Apenas como o plugin de página, você pode definir o texto do botão fechar de um diálogo através de uma opção ou atributo de dados. A opção pode ser configurada para todos os diálogos ligando ao evento mobileinit e definindo a propriedade $.mobile.dialog.prototype.options.closeBtnText a uma string à sua escolha, ou você pode colocar o atributo de dados data-close-btn-text para configurar o texto a partir da sua marcação.
História &Comportamento do botão fechar
Desde que os diálogos são tipicamente usados para suportar ações dentro de uma página, a estrutura não inclui diálogos no rastreamento do histórico do estado do hash. Isto significa que as caixas de diálogo não aparecerão na cronologia do histórico de navegação quando o botão Voltar é clicado. Por exemplo, se você estiver em uma página, clique em um link para abrir uma caixa de diálogo, feche a caixa de diálogo, depois navegue para outra página, se você clicar no botão Voltar do navegador nesse ponto você navegará de volta para a primeira página, não para a caixa de diálogo.
Diálogos de Corrente
Nota: Se uma caixa de diálogo abrir outra caixa de diálogo (encadeamento), fechar a última com um link do tipo data-rel="back" sempre navegará para a caixa de diálogo anterior até que a página raiz do tipo data-role="page" seja alcançada. Isto garante uma navegação consistente entre diálogos.
Estilização &tema
Dialogs podem ser estilizados com diferentes amostras de temas, como qualquer página, adicionando atributos data-theme ao cabeçalho, conteúdo, ou recipientes de rodapé.
Por padrão os diálogos têm cantos arredondados. Os cantos de opção podem ser definidos como falsos adicionando data-corners="false" ao contentor de diálogo:
Os diálogos parecem estar flutuando acima de uma camada de sobreposição. Esta sobreposição adota a cor de conteúdo ‘a’ em swatch por padrão, mas o atributo data-overlay-theme pode ser adicionado ao invólucro da página para definir a sobreposição para qualquer letra swatch.
Dialogs também podem ser usados mais como uma folha de controle para oferecer múltiplos botões se você simplesmente remover a margem superior do elemento recipiente interno do diálogo. Por exemplo, se a sua página de diálogo tivesse uma classe de my-dialog, você poderia adicionar este CSS para fixar esse diálogo no topo: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, ou você poderia simplesmente aplicar esse estilo a todos os diálogos com .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Largura e margens do Dialog
Por uma questão de legibilidade, os diálogos têm um padrão width de 92,5% e um max-width de 500 pixels. Há também um topo de 10% margin para dar às caixas de diálogo uma margem superior maior em telas maiores, mas colapsa para uma margem pequena em smartphones. O recipiente interno do diálogo é deslocado para o top com 15px para ocultar o estilo de canto se um diálogo for usado como uma folha de controle (veja acima). Para anular estes estilos, adicione a seguinte regra de anulação de CSS à sua folha de estilo e aperte-a conforme necessário:
|
1
2
3
4
5
6
7
8
|
|