En vista de muchos marcos front-end anteriores (especialmente marcos de diseño receptivos), los controles de la interfaz de usuario se parecen demasiado a las páginas web y no tienen una sensación nativa. Por lo tanto, la búsqueda de una interfaz de usuario nativa también es un objetivo importante de MUI. MUI se basa en la interfaz de usuario de la plataforma iOS y complementa algunos controles de la interfaz de usuario exclusivos de la plataforma Android. MUI tiene principalmente tres significados: 1. Una versión multilingüe de Windows, un sistema operativo informático lanzado por separado; 2. la organización oficial más autorizada del mundo para la certificación Halal; 3. un nombre propio en tecnología de comunicaciones móviles.
1. Preparativos antes de utilizar el marco.1. Cree un nuevo archivo HTML que contenga mui
En Hbuilder, cree un nuevo archivo HTML y seleccione la plantilla HTML que contiene mui para generar rápidamente una plantilla de página mui. Esta plantilla maneja las referencias de recursos js y css de mui de forma predeterminada.
2. Ingrese el encabezado
La barra de título superior es necesaria para cada página. Ingrese mheader en Hbuilder para generar rápidamente la barra de navegación superior.
3. Ingrese mcuerpo
A excepción de los controles de navegación superior y de pestaña inferior, se recomienda colocar otros controles en el control .mui-content . Ingrese mbody en Hbuilder para generar rápidamente un bloque de código que contenga .mui-content .
1.acordeón (panel plegable)
El panel plegable es similar a la lista secundaria, como sigue:
<ul class=mui-table-view> <li class=mui-table-view-cell mui-collapse> <a class=mui-navigate-right href=#>Panel 1</a> <div class=mui- colapso-content> <p>Subcontenido del panel 1</p> </div> </li> </ul><ul class=mui-table-view> <li class=mui-table-view-cell mui - colapsar> <a class=mui-navigate-right href=#>Panel 2</a> <div class=mui-collapse-content> <p>Subcontenido del panel 2</p> </div> </li> </ul >
2.botones(botones)
botón normal
Agregue la clase .mui-btn al nodo del botón para generar un botón predeterminado; si necesita botones de otros colores, continúe agregando la clase correspondiente. Por ejemplo, .mui-btn-blue puede convertirse en un botón azul.
<button type=button class=mui-btn>Predeterminado</button><button type=button class=mui-btn mui-btn-primary>Azul</button><button type=button class=mui-btn mui- btn -éxito>Verde</botón><tipo de botón=botón clase=mui-btn mui-btn-warning>Amarillo</botón><botón tipo=botón clase=mui-btn mui-btn-danger>Rojo</botón><botón tipo=botón clase=mui-btn mui-btn-royal>Púrpura</botón>
El efecto después de correr es el siguiente:
Si desea botones sin color de fondo ni bordes, solo necesita agregar la clase .mui-btn-outlined . El código es el siguiente:
<tipo de botón=botón clase=mui-btn mui-btn-outlined>Predeterminado</botón><tipo de botón=botón clase=mui-btn mui-btn-primario mui-btn-outlined>Azul</botón><tipo de botón =clase de botón=mui-btn mui-btn-éxito mui-btn-outlined>verde</botón><botón type=botón class=mui-btn mui-btn-warning mui-btn-outlined>amarillo</button><botón tipo=botón class=mui-btn mui-btn-peligro mui-btn-outlined>rojo</button> <tipo de botón=clase de botón=mui-btn mui-btn-royal mui-btn-outlined>Púrpura</button>
Los resultados de ejecución son los siguientes:
3.galería (carrusel de imágenes)
El carrusel de imágenes hereda del complemento de diapositivas, por lo que su estructura DOM y sus eventos son los mismos que los del complemento de diapositivas;
La reproducción en bucle no es compatible de forma predeterminada. La estructura DOM es la siguiente:
<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>
Supongamos que hay cuatro imágenes 1, 2, 3 y 4 en el carrusel de imágenes actual. Comenzando desde la primera imagen, deslícese hacia la izquierda para cambiar de imagen. Al cambiar a la cuarta imagen, continúe deslizándose hacia la izquierda. Habrá dos efectos:
Cuando se muestra la primera imagen, continuar deslizándose hacia la derecha para mostrar la cuarta imagen es el mismo problema; la implementación de este problema debe controlarse a través de la clase .mui-slider-loop y los nodos DOM;
Si desea admitir el bucle, debe agregar la clase .mui-slider-loop al nodo .mui-slider-group . Al mismo tiempo, debe agregar 2 imágenes repetidamente. El orden de las imágenes es: 4. , 1, 2, 3, 4, 1. El ejemplo de código es el siguiente:
<div class=mui-slider> <div class=mui-slider-group mui-slider-loop> <!--Admite bucles, es necesario repetir los nodos de imagen--> <div class=mui-slider-item mui-slider - elemento-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> <!--Admite bucles, necesita repetir los nodos de imagen--> <div class= mui -elemento-deslizador elemento-deslizador-mui-duplicado><a href=#><img src=1.jpg /></a></div> </div></div>
El marco mui tiene un complemento de carrusel de imágenes incorporado. A través de la API JS encapsulada por este complemento, los usuarios pueden configurar si desea realizar el carrusel automáticamente y el ciclo del carrusel.
//Obtener el objeto del complemento del control deslizante var gallery = mui('.mui-slider'); gallery.slider({ intervalo:3000//Período de rotación automática, si es 0, no se reproducirá automáticamente, el valor predeterminado es 0; });Por lo tanto, si desea que el carrusel de imágenes no se reproduzca automáticamente, sino que se cambie mediante el deslizamiento manual del usuario, solo necesita establecer el parámetro de intervalo en 0 mediante el método anterior.
Si desea saltar a la imagen x, puede utilizar el método gotoItem del complemento del carrusel de imágenes, por ejemplo:
//El enlace de eventos que viene con mui solo puede usar el método de delegación de eventos mui(.mui-content).on(tap,#btn,function(){ gallery.slider().gotoItem(2);//Implementación Para la tercera imagen, el índice comienza desde 0});4.entrada (formulario de entrada)
Todos los elementos de entrada, área de texto y otros elementos incluidos en la clase .mui-input-row tendrán el atributo de ancho establecido en width: 100%; de forma predeterminada. Envolver el elemento de etiqueta y los controles anteriores en .mui-input-group puede lograr la mejor disposición.
(También hay un icono de ojo en el lado derecho del cuadro de entrada de contraseña, que encuentro particularmente útil)
El código es el siguiente:
<form class=mui-input-group> <div class=mui-input-row> <label>Nombre de usuario</label> <input type=text class=mui-input-clear placeholder=Ingrese el nombre de usuario> </ div> <div class=mui-input-row> <label>Contraseña</label> <input type=contraseña class=mui-input-password placeholder=Ingrese la contraseña> </div></form>
Actualmente, mui también proporciona varias funciones de mejora de entrada: eliminación rápida, entrada de voz *5+ únicamente y cuadro de contraseña que muestra contraseñas ocultas.
1) Eliminación rápida: simplemente agregue la clase .mui-input-clear al control de entrada. Cuando haya contenido en el control de entrada, habrá un icono de eliminación a la derecha. Al hacer clic en él, se borrará el contenido de entrada actual.
El código es el siguiente:
<form class=mui-input-group> <div class=mui-input-row> <label>Eliminación rápida</label> <input type=text class=mui-input-clear placeholder=Ingrese el contenido> </div >>formulario>
2) Cuadro de búsqueda: agregue la clase .mui-input-row .mui-input-search -row para usar el control de búsqueda
El código es el siguiente:
<div class=mui-input-row mui-search> <tipo de entrada=search class=mui-input-clear placeholder=></div>
3) Entrada de voz *5+ únicamente: para facilitar la entrada rápida, mui integra la entrada de voz HTML5+. Solo necesita agregar la clase .mui-input-speech al control de entrada correspondiente para usar la entrada de voz en el entorno 5+.
4) Cuadro de contraseña: agregue la clase .mui-input-password al elemento de entrada para usarlo
El código es el siguiente:
<form class=mui-input-group> <div class=mui-input-row> <label>Cuadro de contraseña</label> <input type=contraseña class=mui-input-password placeholder=Ingrese la contraseña> </div >>formulario>
5.lista (lista)
El componente de lista encapsulado por mui es relativamente simple y fácil de usar. Solo necesita agregar la clase .mui-table-view en el nodo ul y la clase .mui-table-view-cell en el nodo li .
<ul class=mui-table-view> <li class=mui-table-view-cell>Artículo 1</li> <li class=mui-table-view-cell>Artículo 2</li> <li class= mui-table-view-cell>Artículo 3</li></ul>
Los resultados de ejecución son los siguientes:
Personalizar el color de resaltado de la lista Haga clic en la lista y el elemento de la lista correspondiente se resaltará en gris. Si desea personalizar el color de resaltado, solo necesita reescribir .mui-table-view-cell.mui-active , de la siguiente manera:
/*Haga clic para resaltar el gris*/.mui-table-view-cell.mui-active{ background-color: grey;} Agregar flechas de navegación a la derecha Si necesita agregar una flecha de navegación en el lado derecho y convertirla en un enlace de navegación, solo necesita agregar a subnodo debajo del nodo li y agregar la clase .mui-navigate-right al nodo a , de la siguiente manera :
<ul class=mui-table-view> <li class=mui-table-view-cell> <a class=mui-navigate-right>Artículo 1</a> </li> <li class=mui-table- view-cell> <a class=mui-navigate-right>Elemento 2</a> </li> <li class=mui-table-view-cell> <a class=mui-navigate-right>Elemento 3</a> </li></ul>
Los resultados de ejecución son los siguientes:
Agregue controles como marcadores de esquina digitales a la derechamui admite la colocación de subíndices digitales, botones, interruptores y otros controles en la lista; de forma predeterminada, mui coloca los subíndices digitales en el lado derecho de la lista.
<ul class=mui-table-view> <li class=mui-table-view-cell>Elemento 1 <span class=mui-badge mui-badge-primary>1</span> </li> <li class= mui-table-view-cell>Artículo 2 <span class=mui-badge mui-badge-success>2</span> </li> <li class=mui-table-view-cell>Artículo 3 <span class=mui-badge>3</span> </li></ul>
Los resultados de ejecución son los siguientes:
(Lista de imágenes y texto) La lista de imágenes y texto hereda del componente de lista y agrega principalmente clases .mui-media , .mui-media-object , .mui-media-body , .mui-pull-left/right . El siguiente es el código de muestra.
<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> Felicidad<p class='mui-ellipsis'>Es feliz dormir con la persona que amas, pero ¿qué debes hacer si roncas? </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 madera<p class='mui-ellipsis'>Quiero una pequeña casa de madera como esta, donde pueda hacer helado y comer melones en verano, y sentarme alrededor de la estufa para mantenerme caliente en invierno.</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'>La ciudad en modo horno parece una paleta volcada al anochecer.</p> </div> </a> </li></ul>
Los resultados de ejecución son los siguientes:
Conclusión: el marco mui es realmente muy conveniente de usar. También tiene muchos controles que podemos usar. Los detalles se pueden ver en el sitio web oficial de mui.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.