Подробное введение в диалог html5.2

24 декабря 2017 года был утвержден стандарт HTML5.2, что также означало, что мобильный терминал вступил в стадию планирования HTML5.3. Хотя HTML5.2 был утвержден, некоторые новые внутренние спецификации еще не поддерживаются мобильными браузерами. Чтобы улучшить, здесь мы рассмотрим часто используемый тег, который недавно включен в стандарт, - это тег диалога.

Говоря о теге диалога, многие люди могут быть с ним незнакомы. В конце концов, этот тег поддерживался только браузером Chrome до тех пор, пока не был исправлен стандарт HTML5.2. Что касается использования этого тега, его можно ясно понять, исходя из этого. семантика.

Здесь мы можем подумать о предупреждениях, подтверждениях и других всплывающих окнах. Да, они относятся к одному семейству, все они являются всплывающими окнами. Далее мы кратко рассмотрим некоторые свойства и сценарии использования. тег диалога.

 <dialog open=> <h2>Название</h2> <p>Содержимое</p></dialog>

Поскольку это тег, он фактически такой же, как наши часто используемые теги div, p и другие. Как показано в примере кода выше, он внутренне поддерживает любые другие элементы.

Здесь вы можете заметить, что атрибут open в приведенном выше примере кода, да, он используется для управления отображением и скрытием этого всплывающего окна. Конечно, вы также можете использовать CSS для произвольного управления им, как в случае с Аномалиями. может возникнуть при использовании вспомогательных функций некоторых устройств (таких как специальные возможности, программное обеспечение для чтения с экрана и т. д.), поэтому рекомендуется использовать функции отображения и скрытия в стандарте.

Прежде всего, тег диалога является примером HTMLDialogElement и наследуется от HTMLElement. Следовательно, это тег того же уровня, что и тег div. Единственное отличие состоит в том, что он имеет больше функций по умолчанию, чем тег div. Давайте посмотрим, какие методы по умолчанию мы можем использовать в диалоге.

 var диалог = document.getElementById(dialog);// Предположим, что на странице есть тег диалога с id=dialog // Закрываем диалогdialog.close(); // Отображаем диалог в виде toastdialog.show(); / В модели отображаем диалог диалога.showModal();// Значение параметра, передаваемое при вызове метода диалога.закрыть(), диалог.returnVlaue;// Статус отображения диалога Dialog.open;

Вы можете сначала перейти к примеру, поработать с ним, а затем посмотреть, какие функции он имеет, а затем вернуться для сравнения. Следующее резюме:

1: метод close можно вызывать несколько раз, даже в скрытом состоянии, и можно вызывать снова.

2: close может передавать переменную, которая должна быть строкой и выражаться в returnVlaue.

3: Метод show также можно без проблем вызывать несколько раз, даже в скрытом состоянии.

4: метод show не изменит положение всплывающего уведомления. Всплывающее окно остается в исходном положении после вызова метода show.

5: метод show, позиция отображения находится сразу за предыдущим элементом, по центру, без слоя маски позади него. Режим отображения z-index аналогичен режиму относительного без установки z-index (если showModal не вызывался ранее. ) ).

6: Если был вызван showModal, после метода show элемент отображается в позиции, отображаемой showModal, и не изменится (даже если высота содержимого сильно изменится).

7: Если есть два элемента диалога, оба вызывают метод show. В структуре html последний диалог всегда закрывает предыдущий (независимо от того, какой диалог вызывает метод show первым).

8. За отображением showModal будет слой маски. Уровень отображения находится на уровне веб-представления браузера. Как это понять? После использования showModal для отображения атрибута диалога можно установить элемент с очень высоким уровнем. Диалог будет в конце. Предыдущий пункт особенно подходит для модальных окон. После появления всплывающего окна определенно не возникнет иерархической путаницы.

9: showModal можно вызвать только один раз. Здесь один раз означает, что если диалог находится в состоянии отображения, то при повторном вызове showModal будет сообщено об ошибке, и другими словами, пока он не будет выполнен напрямую. атрибут open существует, его повторный вызов приведет к сообщению об ошибке, поэтому лучше использовать атрибут open по умолчанию, чтобы показать и скрыть диалоговое окно.

10: Если на странице есть два элемента диалога и оба вызывают метод showModal, независимо от их структуры в HTML, уровень диалога, вызванного позже, будет выше уровня диалога, вызванного ранее.

11: Значение диалога.returnVlaue — это значение, передаваемое при вызове диалога.закрыть(строка). Оно поддерживает только строки. Значение, передаваемое при вызове диалога.закрытие, допустимо только при отображении диалога.

12: Если в close не было передано никакого значения, значение returnVlaue будет пустым. Если значение передается в диалог.закрыть(1), после следующего показа диалог.закрытие() закрывается, а returnVlaue по-прежнему равен. до 1.

13: Возвращаемое значение open: true/false.

Еще одним преимуществом диалога является то, что помимо основных событий, таких как щелчок, он поддерживает два дополнительных специальных события для диалога:

 var диалог = document.getElementById(dialog); // Предположим, что на странице есть тег диалога с id=dialog // Когда вызывается метод закрытия. на стороне ПК При нажатии клавиши. Но после версии Chrome, похоже, он больше не работает. диалог.oncancel = функция () {};

Теперь давайте рассмотрим пример: пример отображения событий диалога.

Есть еще несколько вопросов, перечислим их здесь:

1: Событие onclose может быть вызвано только путем вызова диалога.close() для скрытия диалога.

2: После запуска события отмены событие закрытия определенно будет продолжать запускаться. После версии chrome64 отмена не запускается клавишей esc.

3. Если для закрытия диалогового окна имеется несколько кнопок, передайте другое значение при каждом вызове закрытия. В обратном вызове события закрытия используйте значение returnVlaue, чтобы определить, какая кнопка используется для запуска события закрытия.

Некоторые функции диалога были объяснены ранее. Они могут быть неполными или неточными, либо со временем могут появиться новые функции. Любые дополнения приветствуются.

Рассматривая предыдущие примеры, мы также увидели некоторые недостатки, такие как: стиль особенно уродлив. В связи с этим мы можем полностью сбросить стиль с помощью CSS, не затрагивая семантику или что-либо еще. Можете быть уверены, что вы сможете его реорганизовать. . Вот и все.

Я просто хочу поговорить здесь о производительности диалога, поэтому не буду этого делать.

В конце концов, диалог — это семантическая метка для всплывающих диалогов, и он имеет некоторые уникальные преимущества (например, высоту уровня веб-просмотра). Хотя сейчас он поддерживается только Chrome, он по-прежнему очень перспективен для будущего использования. теперь он даже совместим сам с собой. Теперь в других браузерах реализуйте набор диалоговых механизмов самостоятельно (возможно, уже есть план реализации этого, поэтому не буду искать его здесь).

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.