Perintah Invoker: Cara tambahan untuk bekerja dengan dialog, popover ... dan banyak lagi?

Elemen dan API Popover adalah penambahan yang kuat ke platform web. Saya baru -baru ini

menyediakan analisis terperinci mengenai aplikasi mereka dialog dan teknik tanpa dokumen yang ditemui. Walau bagaimanapun, pelaksanaan berasingan mereka berasa tidak perlu kompleks. Penyemak imbas web memperkenalkan "perintah invoker" - atribut

dan

- untuk memudahkan interaksi dengan popovers, dialog, dan ciri -ciri masa depan, meminimumkan pergantungan JavaScript. Atribut ini juga memperkenalkan peristiwa JavaScript baru. command commandfor

Status eksperimen:

ingat, ini adalah ciri eksperimen. Dayakan mereka dalam:

Chrome Canary 134 (Bendera: )

• Firefox Nightly 135 (bendera: ) enable-experimental-web-platform-features
Pratonton Teknologi Safari (Bendera:
• ) dom.element.invokers.enabled
• abstraksi elegan tugas skrip mereka mencadangkan penggunaan yang meluas mungkin. InvokerAttributesEnabled

Penggunaan Asas:

Gunakan elemen seperti butang (mis., , ) dengan atribut

(menentukan nama arahan, seperti "pertunjukan-modal") dan

(merujuk kepada id elemen sasaran). <button></button> <a></a> command mari kita meneroka nilai arahan. commandfor

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

Nilai atribut:

: bersamaan HTML

. Ia membolehkan paparan modal tanpa JavaScript. Ini mencerminkan popovers HTML yang sedia ada, mewujudkan pendekatan yang lebih konsisten.

• show-modal showModal()

  : A
Perintah untuk dialog bukan modal tidak hadir. Memandangkan keupayaan API Popover, dialog bukan modal mungkin menjadi usang.

• show show

  : bersamaan HTML
, menutup dialog.

• close close()

  ,
,
• : Mirror ini

  , show-popover, dan hide-popover, masing -masing. Walaupun berguna, fungsi mereka sudah dapat diakses melalui atribut Popover yang sedia ada. toggle-popover showPopover() hidePopover() togglePopover() Berikut adalah ringkasan:

  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 --.

  pengendalian acara javascript:

  perintah invoker mencetuskan acara command pada elemen sasaran. Ini amat berguna untuk unsur -unsur dialog, yang kekurangan acara show.

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

  pengendalian acara popover adalah serupa:

  dialogs.forEach(dialog => {
    dialog.addEventListener("command", event => {
      if (event.command === "show-modal") { /* Dialog shown */ }
      else if (event.command === "close") { /* Dialog closed */ }
    });
  });

  event.source Menyediakan elemen butang yang menggunakan. Atribut juga boleh ditetapkan melalui JavaScript:

  popovers.forEach(popover => {
    popover.addEventListener("command", event => {
      if (event.command === "show-popover") { /* Popover shown */ }
      // ...
    });
  });

  Perintah Custom:

  Perintah tersuai (mis., --spin-me-a-bit) Benarkan fungsi lanjutan.

  Sokongan Masa Depan:

  Walaupun pada mulanya memberi tumpuan kepada <dialog></dialog> dan popovers, sokongan masa depan untuk <details></details>, <input type="color">, <video></video>, dan kawalan skrin penuh dijangkakan.

  Manfaat:

  Perintah Invoker mengurangkan JavaScript, menawarkan pengendalian seperti peristiwa, dan menyediakan kaedah interaksi alternatif untuk API sedia ada. Mereka memperbaiki dan meningkatkan ciri -ciri sedia ada.

Atas ialah kandungan terperinci Perintah Invoker: Cara tambahan untuk bekerja dengan dialog, popover ... dan banyak lagi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!