Resumo do uso de vários efeitos de comutação de páginas e caixas de diálogo modal no HTML5

Este artigo apresenta principalmente o uso de vários efeitos de comutação de página e caixas de diálogo modal para você. Ele apresenta as técnicas de usar vários elementos de página do HTML5 com mais detalhes. É muito prático. Amigos que precisam podem se referir a ele.

Este artigo resume os vários efeitos de comutação de página e o uso de diálogo modal do HTML5 em detalhes. Compartilhe para sua referência. A análise específica é a seguinte:

A propriedade de transição de dados pode definir o efeito de animação da comutação de página.

Por exemplo: <a href = index.html data-transição = pop> eu vou pop </a>

Tabela de parâmetros de transição de dados:

Descrição do parâmetro

deslize da direita para a esquerda para a página

deslize desliza para cima do fundo

slides deslizantes de cima para baixo em

O pop se expande gradualmente do centro

Fade aparece gradualmente

Vire o flip

NOTA: Se você deseja exibir o botão Voltar na página de destino, poderá adicionar o atributo Data-Direction = Reverse ao link. Este atributo é o mesmo que o data-back original = true. Não sei qual atributo será retido na versão oficial.

Uma caixa de diálogo modal é uma camada pseudo-flutuante com uma barra de título arredondada e um botão de fechamento para eventos exclusivos. Qualquer página estruturada pode ser usada para implementar aplicativos de diálogo modal usando o link Data-Rel = Dialog.

Por exemplo: <a href = foo.html dados-Rel = diálogo> Abra a caixa de diálogo </a>

Este efeito de comutação de página também pode usar o efeito do parâmetro de transição de dados da página padrão. Recomenda -se usar parâmetros POP, slide -up e flip para obter melhores resultados.

Esta caixa de diálogo modal gerará um botão de fechar por padrão, usado para retornar à página pai. Em dispositivos com recursos de script fracos, você também pode adicionar um link com dados-Rel = Voltar para implementar o botão Fechar.

Para dispositivos que suportam scripts, você pode usar diretamente href =# ou dados-Rel = para obter desligamento. Você também pode usar o método de fechamento interno para fechar a caixa de diálogo modal, como: $ ('.

Como a caixa de diálogo modal é uma página temporária exibida dinamicamente, esta página não será salva na tabela de hash, o que significa que não podemos recuar para esta página. Por exemplo, se você clicar em um link na página A para abrir a caixa de diálogo B, a operação será concluída e a caixa de diálogo será fechada e, em seguida, pule para a página C. Nesse momento, clica no botão Voltar do navegador e você retornará à página A, não na página B.

As barras de ferramentas são usadas principalmente em cabeçalho, rodapé e outras áreas e são usadas para apoiar e implementar a aplicação de funções comerciais na página. O JQuery Mobile fornece uma solução relativamente completa.

A barra de ferramentas é dividida em três aplicações: barra de cabeçalho, barra de rodapé e navegação (barra de navegação).

Entre eles, o título e o rodapé são aplicados de algumas maneiras diferentes na página. A barra de ferramentas padrão está posicionada de maneira embutida. Esse método de posicionamento pode obter a máxima compatibilidade, incluindo boa otimização para dispositivos com scripts ruins e compatibilidade com CSS.

Outro método é corrigi -lo, que também pode ser estático. Esse método de posicionamento permite que a barra de ferramentas seja sempre mantida na parte superior ou inferior da tela. E você pode aceitar eventos de clique para exibir/ocultar a barra de ferramentas, que alcançou o objetivo de maximizar o uso do espaço da tela.

Método de implementação: adicione posição de dados = atributo corrigido às áreas de título e rodapé.

O contêiner de título é um controle de exibição para a área do cabeçalho da página, usada principalmente para exibir o título e a área de operação principal.

Código da estrutura: