Invoker 명령 : 대화 상자, Popover… 등을 사용하는 추가 방법?

요소 및 팝 오버 API는 웹 플랫폼에 강력한 추가 기능입니다. 나는 최근에 그들의 응용 분야의 상세한 분석 및 발견되지 않은 기술에 대한 자세한 분석을 제공했다. 그러나 별도의 구현은 불필요하게 복잡하다고 느낍니다 웹 브라우저는 팝 오버, 대화 상자 및 향후 기능과의 상호 작용을 단순화하여 JavaScript Reliance를 최소화하기 위해 "invoker 명령" - dialog 및 속성을 ​​소개합니다. 이 속성은 또한 새로운 JavaScript 이벤트를 소개합니다 실험 상태 : 이들은 실험적인 특징입니다. 다음을 활성화하십시오 크롬 카나리 134 (플래그 : ) Firefox Nightly 135 (플래그 : ) Safari Technology Preview (플래그 : )

스크립팅 작업의 우아한 추상화는 광범위한 채택이 가능성이 있음을 시사합니다. command 기본 사용 : commandfor 속성 ( "show-modal"과 같은 명령 이름을 지정) 및

(대상 요소의 ID 참조)와 함께 버튼과 같은 요소 (예 : , )를 사용하십시오.

명령 값을 탐색합시다 속성 값 :

: HTML은

에 해당합니다. JavaScript없이 모달 디스플레이가 가능합니다. 이것은 기존의 HTML에 침입 한 팝 오버를 반영하여보다 일관된 접근 방식을 만듭니다.

• enable-experimental-web-platform-features : 비 모달 대화 상자에 대한
명령은 없다. Popover API의 기능을 감안할 때 비 모달 대화 상자는 쓸모 없게 될 수 있습니다.
• dom.element.invokers.enabled
: 에 해당하는 HTML, 대화 상자를 닫습니다.
• InvokerAttributesEnabled ,
, :이 거울 , . 유용하지만 기존 Popover 속성을 통해 기능이 이미 액세스 할 수 있습니다.

요약은 다음과 같습니다

Command	Equivalent JavaScript Method	Notes
show-modal	showModal()	Shows a modal dialog.
close	close()	Closes a dialog or popover.
show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
--custom-command	N/A	Custom commands prefixed with --.

JavaScript 이벤트 처리 :

> invoker 명령은 대상 요소에서 a 이벤트를 트리거합니다. 이것은 이벤트가없는 요소에 특히 유용합니다.

팝 오버 이벤트 처리는 비슷합니다

command 는 호출 버튼 요소를 제공합니다. 속성은 javaScript : dialog를 통해 설정할 수도 있습니다 show 사용자 정의 명령 :

사용자 정의 명령 (예 : )은 확장 된 기능을 허용합니다

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

미래 지원 : 는 처음에

및 팝 오버에 초점을 맞추었지만 ,

, dialogs.forEach(dialog => { dialog.addEventListener("command", event => { if (event.command === "show-modal") { /* Dialog shown */ } else if (event.command === "close") { /* Dialog closed */ } }); });에 대한 향후 지원 및 전체 화면 컨트롤이 예상됩니다.

. 혜택 : event.source invoker 명령은 JavaScript를 줄이고 이벤트와 같은 처리를 제공하며 기존 API에 대한 대체 상호 작용 방법을 제공합니다. 그들은 기존 기능을 개선하고 향상시킵니다

위 내용은 Invoker 명령 : 대화 상자, Popover… 등을 사용하는 추가 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!