Introducción detallada al diálogo html5.2

El 24 de diciembre de 2017, se solidificó el estándar HTML5.2, lo que también significó que el terminal móvil entró en la etapa de planificación de HTML5.3. Aunque HTML5.2 se solidificó, los navegadores móviles aún no admiten algunas especificaciones internas nuevas. Para mejorar, aquí echamos un vistazo a una etiqueta de uso común que se incorporó recientemente al estándar, es la etiqueta de diálogo.

Hablando de la etiqueta de diálogo, es posible que muchas personas no estén familiarizadas con ella. Después de todo, esta etiqueta solo era compatible con el navegador Chrome hasta que se corrigió el estándar HTML5.2. En cuanto al uso de esta etiqueta, se puede entender claramente. la semántica.

Lo que podemos pensar aquí es alerta, confirmación y otras ventanas emergentes. Sí, son de la misma familia, todas son cuadros emergentes. A continuación, veremos brevemente algunas propiedades y escenarios de uso. etiqueta de diálogo.

 <dialog open=> <h2>Título</h2> <p>Contenido</p></dialog>

Dado que es una etiqueta, en realidad es la misma que nuestras etiquetas div, p y otras utilizadas comúnmente. Como se muestra en el código de muestra anterior, admite cualquier otro elemento internamente.

Aquí, puede notar que el atributo abierto en el código de muestra anterior, sí, se usa para controlar la visualización y ocultación de esta ventana emergente. Por supuesto, también puede usar CSS para controlarlo arbitrariamente, así como Anormalidades. Puede ocurrir al utilizar las funciones auxiliares de algunos dispositivos (como accesibilidad, software de lectura de pantalla, etc.), por lo que se recomienda utilizar las funciones de mostrar y ocultar en el estándar.

En primer lugar, la etiqueta de diálogo es un ejemplo de HTMLDialogElement y hereda de HTMLElement. Por lo tanto, es una etiqueta del mismo nivel que la etiqueta div. La única diferencia es que tiene más funciones predeterminadas que div. Echemos un vistazo a los métodos predeterminados que podemos usar en el cuadro de diálogo.

 var dialog = document.getElementById(dialog);// Supongamos que hay una etiqueta de diálogo con id=dialog en la página // Cerrar dialogdialog.close() // Mostrar el diálogo en forma de roastdialog.show(); / En el modelo Mostrar dialogdialog.showModal();// El valor del parámetro pasado cuando dialog.close() se llama dialog.returnVlaue;// El estado de visualización del diálogo dialog.open;

Puede ir al ejemplo primero, operarlo, luego ver qué características tiene y luego volver para comparar. El siguiente resumen:

1: El método de cierre se puede llamar varias veces, incluso en el estado oculto, y se puede volver a llamar.

2: close puede pasar una variable, que debe ser una cadena y expresarse en returnVlaue.

3: El método show también se puede llamar varias veces, incluso en estado oculto, sin ningún problema.

4: El método show no cambiará la posición del brindis. El cuadro emergente todavía está en la posición original después de llamar al método show.

5: método show, la posición de visualización está inmediatamente detrás del elemento anterior, centrada, sin una capa de máscara detrás. El modo de visualización del índice z es similar al de relativo sin configurar el índice z (si no se ha llamado a showModal antes). ) ).

6: Si se ha llamado a showModal, después del método show, el elemento se muestra en la posición mostrada por showModal y no cambiará (incluso si la altura del contenido cambia mucho).

7: Si hay dos elementos de diálogo, ambos llaman al método show. En la estructura html, el último diálogo siempre cubrirá el anterior (independientemente de qué diálogo llame primero al método show).

8: Habrá una capa de máscara detrás de la visualización de showModal. El nivel de visualización está en el nivel de vista web del navegador. ¿Cómo entenderlo? Puede configurar un elemento con un nivel muy alto para mostrar el atributo de diálogo. El cuadro de diálogo estará al final. El punto anterior es particularmente adecuado para cuadros modales. Definitivamente no habrá confusión jerárquica después de que aparezca el cuadro emergente.

9: showModal solo se puede llamar una vez. La única vez aquí significa que si el cuadro de diálogo está en el estado de visualización, se informará un error cuando se vuelva a llamar a showModal y no se podrá ejecutar directamente. el atributo abierto existe, llamarlo nuevamente informará un error, por lo que es mejor usar el atributo abierto predeterminado para mostrar y ocultar el cuadro de diálogo.

10: Si hay dos elementos de diálogo en la página y ambos llaman al método showModal, independientemente de su estructura en HTML, el nivel del diálogo llamado más tarde será mayor que el nivel del diálogo llamado anteriormente.

11: El valor de dialog.returnVlaue es el valor pasado al llamar a dialog.close (cadena). Solo admite cadenas. El valor pasado cuando se llama a dialog.close solo es válido cuando se muestra el cuadro de diálogo.

12: Si no se ha pasado ningún valor en close, el valor de returnVlaue estará vacío. Si se pasa un valor a dialog.close(1), después del siguiente show, dialog.close() se cierra y returnVlaue sigue siendo igual. a 1.

13: El valor de retorno de open es: verdadero/falso.

Otra ventaja del diálogo es que además de eventos básicos como hacer clic, admite dos eventos especiales adicionales para el diálogo:

 var dialog = document.getElementById(dialog); // Suponemos que hay una etiqueta de diálogo con id=dialog en la página // Cuando se llama al método de cierre dialog.onclose = function(){} // Cuando se presiona esc; en el lado de la PC Al presionar la tecla. Pero después de la versión de Chrome, parece que ya no funciona. diálogo.oncancel = función(){};

Ahora veamos un ejemplo: visualización de ejemplo de evento de diálogo.

También hay varias preguntas, enumerémoslas aquí:

1: Solo llamando a dialog.close() para ocultar el cuadro de diálogo se puede activar el evento de cierre.

2: Después de que se activa el evento de cancelación, el evento de cierre definitivamente continuará activándose. Después de la versión chrome64, la tecla esc no activa la cancelación.

3: Si hay varios botones para cerrar el cuadro de diálogo, pase un valor diferente cada vez que se llame a cerrar. En la devolución de llamada del evento de cierre, use el valor de returnVlaue para determinar qué botón se usa para activar el evento de cierre.

Algunas de las funciones del diálogo se han explicado anteriormente. Es posible que estén incompletas o sean inexactas, o que aparezcan funciones más nuevas con el tiempo.

Al observar los ejemplos anteriores, también vimos algunas deficiencias, como: el estilo es particularmente feo. En este sentido, podemos restablecer completamente el estilo usando CSS sin afectar la semántica ni nada más. Puede estar seguro de que puede refactorizarlo. . Eso es todo.

Sólo quiero hablar aquí sobre el desempeño del diálogo, así que no lo haré.

Después de todo, el diálogo es una etiqueta semántica para los cuadros de diálogo emergentes y tiene algunas ventajas únicas (como la altura del nivel de vista web). Aunque ahora solo es compatible con Chrome, sigue siendo muy prometedor para uso futuro. ahora incluso es compatible consigo mismo. Ahora, en otros navegadores, implemente un conjunto de mecanismos de diálogo usted mismo (tal vez ya exista un plan de implementación para esto, así que no lo buscaré aquí).

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.