Estrutura de front-end HTML5 móvel – uso de MUI

Em vista de muitas estruturas de front-end anteriores (especialmente estruturas de layout responsivas), os controles de UI se parecem muito com páginas da web e não têm uma sensação nativa. Portanto, a busca por uma UI nativa também é um objetivo importante do MUI. MUI é baseado na IU da plataforma iOS e complementa alguns controles de IU exclusivos da plataforma Android. MUI tem principalmente três significados: 1. Uma versão multilíngue do Windows, um sistema operacional de computador lançado separadamente 2. a organização oficial de maior autoridade do mundo para certificação Halal 3. um nome próprio em tecnologia de comunicação móvel;

1. Crie um novo arquivo HTML contendo mui

No Hbuilder, crie um novo arquivo HTML e selecione o modelo HTML contendo mui para gerar rapidamente um modelo de página mui. Este modelo lida com referências de recursos js e css do mui por padrão.

2. Digite mheader

A barra de título superior é necessária para cada página. Insira mheader no Hbuilder para gerar rapidamente a barra de navegação superior.

3. Digite corpo

Exceto para os controles de navegação superior e da guia inferior, é recomendado que outros controles sejam colocados no controle .mui-content Insira mbody no Hbuilder para gerar rapidamente um bloco de código contendo .mui-content .

1.acordeão (painel dobrável)

O painel dobrável é semelhante à lista secundária, conforme segue:

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Painel 1</a> <div class=mui- colapso-content> <p>Subconteúdo do painel 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - colapso> <a class=mui-navigate-right href=#>Painel 2</a> <div class=mui-collapse-content> <p>Subconteúdo do painel 2</p> </div> </li> </ul >

2. botões(botões)

Botão normal

Adicione a classe .mui-btn ao nó do botão para gerar um botão padrão; se precisar de botões de outras cores, continue adicionando a classe correspondente. Por exemplo, .mui-btn-blue pode se tornar um botão azul.

 <button type=button class=mui-btn>Padrão</button><button type=button class=mui-btn mui-btn-primary>Azul</button><button type=button class=mui-btn mui- btn -success>Verde</button><button type=button class=mui-btn mui-btn-warning>Amarelo</button><button type=button class=mui-btn mui-btn-danger>Vermelho</button><button type=button class=mui-btn mui-btn-royal>Roxo</button>

O efeito após a corrida é o seguinte:

Se você quiser botões sem cor de fundo e bordas, você só precisa adicionar a classe .mui-btn-outlined . O código é o seguinte:

 <button type=button class=mui-btn mui-btn-outlined>Padrão</button><button type=button class=mui-btn mui-btn-primary mui-btn-outlined>Azul</button><tipo de botão =botão class=mui-btn mui-btn-success mui-btn-outlined>verde</button><button type=button class=mui-btn mui-btn-warning mui-btn-outlined>amarelo</button><button type=button class=mui-btn mui-btn-danger mui-btn-outlined>vermelho</button> <button type=button class=mui-btn mui-btn-royal mui-btn-outlined>Roxo</button>

Os resultados da execução são os seguintes:

3. galeria (carrossel de imagens)

O carrossel de imagens herda do plug-in de slides, portanto, sua estrutura e eventos DOM são iguais aos do plug-in de slides;

A reprodução em loop não é suportada por padrão. A estrutura DOM é a seguinte:

 <div class=mui-slider> <div class=mui-slider-group> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div > <div class=mui-slider-item><a href=#><img src=2.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src =4.jpg /></a></div> </div></div>

Suponha que haja quatro imagens 1, 2, 3 e 4 no carrossel de imagens atual. Começando pela primeira imagem, deslize para a esquerda para alternar as imagens. Ao mudar para a quarta imagem, continue a deslizar para a esquerda. haverá dois efeitos:

1. Suporta looping: deslize para a esquerda para mudar diretamente para a primeira imagem;
2. O loop não é suportado: deslize para a esquerda, sem resposta, continue exibindo a 4ª imagem. Se o usuário quiser exibir a 1ª imagem, ele deve deslizar continuamente para a direita para mudar para a 1ª imagem;

Quando a primeira imagem é exibida, continuar deslizando para a direita para exibir a quarta imagem é o mesmo problema; a implementação desse problema precisa ser controlada por meio da classe .mui-slider-loop e dos nós DOM;

Se quiser oferecer suporte ao loop, você precisa adicionar a classe .mui-slider-loop ao nó .mui-slider-group . Ao mesmo tempo, você precisa adicionar repetidamente 2 imagens. , 1, 2, 3, 4, 1. O exemplo de código é o seguinte:

 <div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Suporta looping, precisa repetir nós de imagem--> <div class=mui-slider-item mui-slider - item-duplicado><a href=#><img src=4.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=1.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=2.jpg /></a> </div> <div class=mui-slider-item><a href=#><img src=3.jpg /></a></div> <div class=mui-slider-item><a href=#><img src=4.jpg /></a></div> <!--Suporta loop, precisa repetir nós de imagem--> <div class= mui -slider-item mui-slider-item-duplicate><a href=#><img src=1.jpg /></a></div> </div></div>

A estrutura mui possui um plug-in de carrossel de imagens integrado. Por meio da API JS encapsulada por este plug-in, os usuários podem definir se devem fazer o carrossel e o ciclo do carrossel automaticamente.

 //Obter o objeto do plug-in do controle deslizante var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//Período de rotação automática, se for 0, não será reproduzido automaticamente, o padrão é 0;});

Portanto, se você deseja que o carrossel de imagens não seja reproduzido automaticamente, mas sim alternado pelo deslizamento manual do usuário, basta definir o parâmetro de intervalo como 0 através do método acima.

Se quiser pular para a x-ésima imagem, você pode usar o método gotoItem do plug-in do carrossel de imagens, por exemplo:

 //A vinculação de evento que vem com mui só pode usar o método de delegação de evento mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Implantação Para a terceira foto, o índice começa em 0});

4.input (formulário de entrada)

Todos os elementos input, textarea e outros elementos agrupados na classe .mui-input-row terão o atributo width definido como width: 100%; por padrão; Agrupar o elemento label e os controles acima em .mui-input-group pode obter o melhor arranjo.

(Há também um ícone de olho no lado direito da caixa de entrada de senha, que considero particularmente útil)

O código é o seguinte:

 <form class=mui-input-group> <div class=mui-input-row> <label>Nome de usuário</label> <input type=text class=mui-input-clear placeholder=Por favor, insira o nome de usuário> </ div> <div class=mui-input-row> <label>Senha</label> <input type=password class=mui-input-password placeholder=Por favor, insira a senha> </div></form>

Atualmente, mui também oferece várias funções de aprimoramento de entrada: exclusão rápida, entrada de voz *5+ apenas e caixa de senha mostrando senhas ocultas.

1) Exclusão rápida: basta adicionar a classe .mui-input-clear ao controle de entrada. Quando houver conteúdo no controle de entrada, haverá um ícone de exclusão à direita.

O código é o seguinte:

 <form class=mui-input-group> <div class=mui-input-row> <label>Exclusão rápida</label> <input type=text class=mui-input-clear placeholder=Por favor, insira o conteúdo> </div </form>

2) Caixa de pesquisa: adicione a classe .mui-input-row .mui-input-search -row para usar o controle de pesquisa

O código é o seguinte:

 <div class=mui-input-row mui-search> <input type=search class=mui-input-clear placeholder=></div>

3) Entrada de voz *5+ apenas: Para facilitar a entrada rápida, mui integra entrada de voz HTML5+. Você só precisa adicionar a classe .mui-input-speech ao controle de entrada correspondente para usar a entrada de voz no ambiente 5+.

4) Caixa de senha: adicione a classe .mui-input-password ao elemento de entrada para usá-la

O código é o seguinte:

 <form class=mui-input-group> <div class=mui-input-row> <label>Caixa de senha</label> <input type=password class=mui-input-password placeholder=Por favor, insira a senha> </div </form>

5.lista(lista)

O componente de lista encapsulado por mui é relativamente simples e fácil de usar. Você só precisa adicionar a classe .mui-table-view no nó ul e a classe .mui-table-view-cell no nó li .

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1</li> <li class=mui-table-view-cell>Item 2</li> <li class= mui-table-view-cell>Item 3</li></ul>

Os resultados da execução são os seguintes:

Clique na lista e o item da lista correspondente será destacado em cinza. Se você quiser personalizar a cor de destaque, basta reescrever .mui-table-view-cell.mui-active , da seguinte maneira:

 /*Clique para destacar cinza*/.mui-table-view-cell.mui-active{ background-color: grey;}

Se você precisar adicionar uma seta de navegação ao lado direito e transformá-la em um link de navegação, você só precisa adicionar a subnó sob o nó li e adicionar a classe .mui-navigate-right ao nó a , como segue :

 <ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Item 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Item 3</a> </li></ul>

Os resultados da execução são os seguintes:

mui suporta a colocação de subscritos digitais, botões, interruptores e outros controles na lista. O padrão de mui é colocar os subscritos digitais no lado direito da lista.

 <ul class=mui-table-view> <li class=mui-table-view-cell>Item 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Item 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Item 3 <span class=mui-badge>3</span> </li></ul>

Os resultados da execução são os seguintes:

A lista de imagens e texto herda do componente de lista e adiciona principalmente as classes .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right .

 <ul class=mui-table-view> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img /a.jpg> <div class=mui-media-body> Felicidade<p class='mui-ellipsis'>É uma alegria dormir com quem você ama, mas o que você deve fazer se você ronca? </p> </div> </a> </li> <li class=mui-table-view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui- pull-left src=img/b.jpg> <div class=mui-media-body> casa de madeira<p class='mui-ellipsis'>Quero uma casinha de madeira como esta, onde possa fazer sorvete e comer melões no verão, e sentar ao redor do fogão para me aquecer no inverno.</p> </div> </a> </li> <li class=mui-table -view-cell mui-media> <a href=javascript:;> <img class=mui-media-object mui-pull-left src=img/c .jpg> <div class=mui-media-body> CBD <p class='mui-ellipsis'>A cidade no modo forno parece uma paleta invertida ao anoitecer.</p> </div> </a> </li></ul>

Os resultados da execução são os seguintes:

Conclusão: O framework mui é realmente muito conveniente de usar. Ele também possui muitos controles para usarmos. Os detalhes podem ser visualizados no site oficial do mui.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.