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:
Animação de página :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.
Caixa de diálogo modalUma 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.
Barra de ferramentasAs 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é.
Contêiner de títuloO 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:
Copie o código