Pengantar mendetail tentang dialog html5.2

Pada tanggal 24 Desember 2017, standar HTML5.2 diperkuat, yang juga berarti bahwa terminal seluler memasuki tahap perencanaan HTML5.3. Meskipun HTML5.2 telah diperkuat, beberapa spesifikasi internal baru belum didukung oleh browser seluler perbaikan, di sini kita melihat tag yang umum digunakan yang baru dimasukkan ke dalam standar, yaitu tag dialog.

Berbicara tentang tag dialog, mungkin banyak orang yang belum familiar dengannya, karena tag ini hanya didukung oleh browser Chrome sampai standar HTML5.2 diperbaiki Sesi.

Apa yang mungkin kita pikirkan di sini adalah peringatan, konfirmasi, dan jendela pop-up lainnya. Ya, semuanya berasal dari keluarga yang sama, semuanya adalah kotak pop-up. Selanjutnya, kita akan melihat secara singkat beberapa properti dan skenario penggunaan tanda dialog.

 <dialog open=> <h2>Judul</h2> <p>Isi</p></dialog>

Karena ini adalah sebuah tag, sebenarnya sama dengan div, p, dan tag lainnya yang biasa kita gunakan. Seperti yang ditunjukkan pada contoh kode di atas, ini mendukung elemen lain apa pun secara internal.

Di sini, Anda mungkin memperhatikan bahwa atribut open pada kode contoh di atas, ya, ini digunakan untuk mengontrol tampilan dan penyembunyian jendela pop-up ini, tentu saja, Anda juga dapat menggunakan css untuk mengontrolnya secara sewenang-wenang, seperti itu mungkin terjadi saat menggunakan fungsi tambahan beberapa perangkat (seperti aksesibilitas, perangkat lunak pembaca layar, dll.), jadi disarankan untuk menggunakan fungsi tampilkan dan sembunyikan dalam standar.

Pertama-tama, tag dialog adalah contoh HTMLDialogElement dan merupakan warisan dari HTMLElement. Oleh karena itu, tag ini memiliki level yang sama dengan tag div. Satu-satunya perbedaan adalah ia memiliki lebih banyak fungsi default daripada div Mari kita lihat dialog metode default apa yang bisa kita gunakan.

 var dialog = document.getElementById(dialog);// Asumsikan ada tag dialog dengan id=dialog di halaman // Tutup dialogdialog.close(); // Tampilkan dialog dalam bentuk toastdialog.show(); / Dalam model Tampilan dialogdialog.showModal();// Nilai parameter yang diteruskan ketika dialog.close() disebut dialog.returnVlaue;// Status tampilan dialog dialog.open;

Anda dapat melihat contohnya terlebih dahulu, mengoperasikannya, lalu melihat fitur apa saja yang dimilikinya, lalu kembali untuk membandingkannya.

1: Metode tutup dapat dipanggil beberapa kali, bahkan dalam keadaan tersembunyi, dan dapat dipanggil lagi.

2: close dapat meneruskan variabel, yang harus berupa string dan dinyatakan dalam returnVlaue.

3: Metode pertunjukan juga dapat dipanggil berkali-kali, bahkan dalam keadaan tersembunyi, tanpa masalah.

4: Metode pertunjukan tidak akan mengubah posisi roti panggang. Kotak pop-up masih pada posisi semula setelah metode pertunjukan dipanggil.

5: metode show, posisi tampilan tepat di belakang elemen sebelumnya, di tengah, tanpa lapisan topeng di belakangnya. Mode tampilan indeks-z mirip dengan relatif tanpa mengatur indeks-z (jika showModal belum dipanggil sebelumnya. ) ).

6: Jika showModal telah dipanggil, setelah metode show, elemen ditampilkan pada posisi yang ditampilkan oleh showModal dan tidak akan berubah (meskipun tinggi konten banyak berubah).

7: Jika ada dua elemen dialog, keduanya memanggil metode pertunjukan. Dalam struktur html, dialog terakhir akan selalu mencakup elemen sebelumnya (terlepas dari dialog mana yang memanggil metode pertunjukan terlebih dahulu).

8: Akan ada lapisan topeng di belakang tampilan showModal. Level tampilan berada di level tampilan web browser. Bagaimana memahaminya? Anda dapat mengatur elemen dengan level yang sangat tinggi Dialog akan berada di akhir. Poin sebelumnya sangat cocok untuk kotak modal. Pasti tidak akan ada kebingungan hierarki setelah kotak pop-up muncul.

9: showModal hanya dapat dipanggil satu kali di sini berarti jika dialog dalam keadaan tampilan, maka kesalahan akan dilaporkan ketika showModal dipanggil lagi, dan itu tidak dapat dijalankan secara langsung atribut open ada, memanggilnya lagi akan Ada kesalahan yang dilaporkan, jadi lebih baik menggunakan atribut open default untuk menampilkan dan menyembunyikan dialog.

10: Jika ada dua elemen dialog pada halaman dan keduanya memanggil metode showModal, apapun strukturnya dalam HTML, level dialog yang dipanggil nanti akan lebih tinggi dari level dialog yang dipanggil sebelumnya.

11: Nilai dialog.returnVlaue adalah nilai yang diteruskan saat memanggil dialog.close(string). Nilai yang diteruskan hanya saat dialog.close dipanggil hanya valid saat dialog ditampilkan.

12: Jika tidak ada nilai yang diteruskan ke close, nilai returnVlaue akan kosong. Jika nilai diteruskan ke dialog.close(1), setelah pertunjukan berikutnya, dialog.close() ditutup, dan returnVlaue masih sama. ke 1.

13: Nilai kembalian terbuka adalah: benar/salah.

Keuntungan lain dari dialog adalah selain kejadian dasar seperti klik, dialog juga mendukung dua kejadian khusus tambahan untuk dialog:

 var dialog = document.getElementById(dialog); // Asumsikan ada tag dialog dengan id=dialog di halaman // Saat metode close dipanggil dialog.onclose = function(){}; di sisi pc Saat menekan tombol. Namun setelah versi chrome sepertinya sudah tidak berfungsi lagi. dialog.oncancel = function(){};

Sekarang mari kita lihat contoh: tampilan contoh acara dialog.

Ada juga beberapa pertanyaan, mari kita daftarkan di sini:

1: Hanya dengan memanggil dialog.close() untuk menyembunyikan dialog, peristiwa onclose dapat dipicu.

2: Setelah event pembatalan terpicu, event close pasti akan terus terpicu. Setelah versi chrome64, pembatalan tidak dipicu oleh kunci esc.

3: Jika ada beberapa tombol untuk menutup dialog, berikan nilai yang berbeda setiap kali close dipanggil. Dalam panggilan balik acara close, gunakan nilai returnVlaue untuk menentukan tombol mana yang digunakan untuk memicu acara close.

Beberapa tampilan dialog telah dijelaskan sebelumnya. Mungkin tidak lengkap atau tidak akurat, atau fitur-fitur baru mungkin muncul seiring berjalannya waktu.

Saat melihat contoh sebelumnya, kami juga melihat beberapa kekurangan, seperti: gayanya sangat jelek. Dalam hal ini, kami dapat menyetel ulang gaya sepenuhnya menggunakan CSS tanpa memengaruhi semantik atau apa pun Itu saja.

Saya hanya ingin berbicara tentang kinerja dialog di sini, jadi saya tidak akan membahasnya.

Bagaimanapun, dialog adalah label semantik untuk dialog pop-up, dan memiliki beberapa keunggulan unik (seperti ketinggian tingkat tampilan web). Meskipun saat ini hanya didukung oleh Chrome, ini masih sangat menjanjikan untuk penggunaan di masa mendatang, dan bahkan sekarang kompatibel dengan dirinya sendiri. Sekarang, di browser lain, terapkan sendiri serangkaian mekanisme dialog (mungkin sudah ada rencana implementasi untuk ini, jadi saya tidak akan mencarinya di sini).

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.