เมื่อวันที่ 24 ธันวาคม 2017 มาตรฐาน HTML5.2 ได้รับการเสริมความแข็งแกร่ง ซึ่งหมายความว่าเทอร์มินัลมือถือเข้าสู่ขั้นตอนการวางแผน HTML5.3 แม้ว่า HTML5.2 จะได้รับการเสริมความแข็งแกร่ง แต่ข้อกำหนดภายในใหม่บางอย่างยังไม่ได้รับการรองรับโดยเบราว์เซอร์มือถือ ปรับปรุง ต่อไปนี้เราจะดูแท็กที่ใช้กันทั่วไปซึ่งรวมอยู่ในมาตรฐานใหม่ ซึ่งก็คือแท็กโต้ตอบ
1.เขียนไว้ข้างหน้าเมื่อพูดถึงแท็กกล่องโต้ตอบ หลายๆ คนอาจไม่คุ้นเคยกับแท็กนี้ ท้ายที่สุดแล้ว เฉพาะเบราว์เซอร์ Chrome เท่านั้นที่สนับสนุนแท็กนี้ จนกว่ามาตรฐาน HTML5.2 จะได้รับการแก้ไข ส่วนการใช้แท็กนี้ก็เข้าใจได้ชัดเจน ความหมาย เซสชัน
สิ่งที่เราอาจนึกถึงที่นี่คือการแจ้งเตือน ยืนยัน และหน้าต่างป๊อปอัปอื่นๆ ใช่ มันเป็นครอบครัวเดียวกัน ล้วนเป็นกล่องป๊อปอัป ต่อไป เราจะดูคุณสมบัติและสถานการณ์การใช้งานบางอย่างโดยย่อ แท็กโต้ตอบ
2. การใช้ฉลาก<dialog open=> <h2>ชื่อเรื่อง</h2> <p>เนื้อหา</p></dialog>
เนื่องจากเป็นแท็ก จริงๆ แล้วจึงเหมือนกับแท็ก div, p และแท็กอื่นๆ ที่เราใช้งานทั่วไป ดังที่แสดงในโค้ดตัวอย่างด้านบน จึงรองรับองค์ประกอบอื่นๆ ภายใน
ที่นี่ คุณอาจสังเกตเห็นว่าแอตทริบิวต์ open ในโค้ดตัวอย่างข้างต้น ใช่ ใช้เพื่อควบคุมการแสดงผลและการซ่อนหน้าต่างป๊อปอัปนี้ แน่นอนว่า คุณยังสามารถใช้ css เพื่อควบคุมโดยพลการได้ เช่นเดียวกับบางส่วน ฟังก์ชั่นเสริมของอุปกรณ์ (เช่น การเข้าถึงแบบไร้สิ่งกีดขวาง ซอฟต์แวร์อ่านหน้าจอ ฯลฯ) อาจทำให้เกิดความผิดปกติ ดังนั้นจึงแนะนำให้ใช้ฟังก์ชั่นแสดงและซ่อนในมาตรฐาน
3. วิธีการเริ่มต้นที่รองรับก่อนอื่น แท็กกล่องโต้ตอบคือตัวอย่างของ HTMLDialogElement และสืบทอดมาจาก HTMLElement ดังนั้นจึงเป็นแท็กระดับเดียวกับแท็ก div มาดูกันว่ากล่องโต้ตอบวิธีการเริ่มต้นใดบ้างให้เราใช้
var Dialog = document.getElementById(dialog);// สมมติว่ามีแท็กไดอะล็อกพร้อม id=dialog ในหน้า // ปิดไดอะล็อกไดอะล็อก.ปิด(); // แสดงไดอะล็อกในรูปแบบของ toastdialog.show(); / ในโมเดล Display Dialogdialog.showModal();// ค่าพารามิเตอร์ที่ส่งผ่านเมื่อ Dialog.close() เรียกว่า Dialog.returnVlaue;// สถานะการแสดงผลของไดอะล็อก Dialog.open;
คุณสามารถไปที่ตัวอย่างก่อน ใช้งาน จากนั้นดูว่ามีฟีเจอร์อะไรบ้าง แล้วกลับมาเปรียบเทียบกัน
1: วิธีการปิดสามารถเรียกได้หลายครั้ง แม้จะอยู่ในสถานะซ่อนเร้น และสามารถเรียกได้อีกครั้ง
2: ปิดสามารถส่งผ่านในตัวแปร ซึ่งจะต้องเป็นสตริงและแสดงใน returnVlaue
3: วิธีการแสดงสามารถเรียกได้หลายครั้ง แม้จะอยู่ในสถานะที่ซ่อนอยู่ โดยไม่มีปัญหาใดๆ
4: วิธีการแสดงจะไม่เปลี่ยนตำแหน่งของขนมปังปิ้ง กล่องป๊อปอัปยังคงอยู่ที่ตำแหน่งเดิมหลังจากที่เรียกวิธีการแสดงแล้ว
5: วิธีการแสดง ตำแหน่งการแสดงผลจะอยู่ด้านหลังองค์ประกอบก่อนหน้า ตรงกลาง โดยไม่มีเลเยอร์มาส์กอยู่ด้านหลัง โหมดการแสดงผลของดัชนี z จะคล้ายกับของสัมพัทธ์โดยไม่ต้องตั้งค่าดัชนี z (หากไม่ได้เรียก showModal มาก่อน ) ))
6: หากเรียกใช้ showModal หลังจากเมธอด show องค์ประกอบจะแสดงที่ตำแหน่งที่แสดงโดย showModal และจะไม่เปลี่ยนแปลง (แม้ว่าความสูงของเนื้อหาจะเปลี่ยนไปมากก็ตาม)
7: หากมีองค์ประกอบกล่องโต้ตอบสองรายการ ทั้งสองเรียกเมธอด show ในโครงสร้าง html กล่องโต้ตอบหลังจะครอบคลุมองค์ประกอบก่อนหน้าเสมอ (ไม่ว่ากล่องโต้ตอบใดจะเรียกใช้เมธอด show ก่อน)
8: จะมีเลเยอร์มาส์กอยู่ด้านหลังการแสดง showModal ระดับการแสดงผลอยู่ที่ระดับ webview ของเบราว์เซอร์ คุณสามารถตั้งค่าองค์ประกอบที่มีระดับที่สูงมากได้ กล่องโต้ตอบจะอยู่ในตอนท้าย จุดก่อนหน้านี้เหมาะอย่างยิ่งสำหรับกล่องโมดอล จะไม่มีความสับสนในลำดับชั้นอย่างแน่นอนหลังจากที่กล่องป๊อปอัปปรากฏขึ้น
9: showModal สามารถเรียกได้เพียงครั้งเดียว หมายความว่าหากกล่องโต้ตอบอยู่ในสถานะการแสดงผล ข้อผิดพลาดจะถูกรายงานเมื่อมีการเรียก showModal อีกครั้ง และไม่สามารถดำเนินการได้โดยตรง มีแอตทริบิวต์ open อยู่ การเรียกอีกครั้งจะมีการรายงานข้อผิดพลาด ดังนั้นจึงควรใช้แอตทริบิวต์ open เริ่มต้นเพื่อแสดงและซ่อนกล่องโต้ตอบ
10: หากมีองค์ประกอบกล่องโต้ตอบสองรายการบนเพจ และทั้งสองเรียกเมธอด showModal โดยไม่คำนึงถึงโครงสร้างใน HTML ระดับของกล่องโต้ตอบที่ถูกเรียกในภายหลังจะสูงกว่าระดับของกล่องโต้ตอบที่ถูกเรียกก่อนหน้านี้
11: ค่าของไดอะล็อก.รีเทิร์นVlaue คือค่าที่ส่งผ่านเมื่อเรียกใช้ไดอะล็อก.ปิด(สตริง) โดยจะรองรับเฉพาะสตริงเท่านั้น ค่าที่ส่งผ่านเมื่อเรียกใช้ไดอะล็อก.ปิดจะมีผลเฉพาะเมื่อไดอะล็อกปรากฏขึ้นเท่านั้น
12: หากไม่มีการส่งผ่านค่าใด ๆ ในการปิด ค่าของ returnVlaue จะว่างเปล่า หากค่าไดอะล็อก.ปิด(1) ถูกส่งไปหนึ่งครั้ง หลังจากการแสดงครั้งถัดไป ไดอะล็อก.ปิด() จะถูกปิด และผลตอบแทนยังคงเท่ากับ 1 .
13: ค่าส่งคืนของการเปิดคือ: จริง/เท็จ
4. เหตุการณ์เริ่มต้นที่รองรับข้อดีอีกประการหนึ่งของกล่องโต้ตอบคือ นอกเหนือจากเหตุการณ์พื้นฐาน เช่น การคลิกแล้ว ยังสนับสนุนเหตุการณ์พิเศษเพิ่มเติมอีกสองเหตุการณ์สำหรับกล่องโต้ตอบ:
var Dialog = document.getElementById(dialog); // สมมติว่ามีแท็กไดอะล็อกพร้อม id=dialog ในหน้า // เมื่อเรียกใช้เมธอด close Dialog.onclose = function(){}; ทางด้านพีซี เมื่อกดปุ่ม แต่หลังจากเวอร์ชัน Chrome ดูเหมือนว่าจะไม่ทำงานอีกต่อไป Dialog.oncancel = ฟังก์ชั่น(){};ตอนนี้เรามาดูตัวอย่าง: การแสดงตัวอย่างเหตุการณ์ไดอะล็อก
นอกจากนี้ยังมีคำถามหลายข้อ เรามาแสดงรายการได้ที่นี่:
1: โดยการเรียกไดอะล็อก.ปิด() เพื่อซ่อนกล่องโต้ตอบเท่านั้นที่สามารถทริกเกอร์เหตุการณ์ onclose ได้
2: หลังจากที่เหตุการณ์การยกเลิกถูกทริกเกอร์ เหตุการณ์การปิดจะยังคงถูกทริกเกอร์ต่อไปอย่างแน่นอน หลังจากเวอร์ชัน chrome64 การยกเลิกจะไม่ถูกทริกเกอร์โดยปุ่ม esc
3: หากมีหลายปุ่มสำหรับปิดกล่องโต้ตอบ ให้ส่งผ่านค่าที่แตกต่างกันในแต่ละครั้งที่มีการเรียกปิด ในการเรียกกลับของเหตุการณ์การปิด ให้ใช้ค่าของ returnVlaue เพื่อกำหนดว่าปุ่มใดที่จะใช้เพื่อทริกเกอร์เหตุการณ์การปิด
5. อื่นๆการแสดงโต้ตอบบางส่วนได้รับการอธิบายไว้ก่อนหน้านี้ อาจไม่สมบูรณ์หรือไม่ถูกต้อง หรือคุณลักษณะใหม่ๆ อาจปรากฏขึ้นเมื่อเวลาผ่านไป
เมื่อดูตัวอย่างก่อนหน้านี้ เรายังเห็นข้อบกพร่องบางอย่าง เช่น: สไตล์นี้น่าเกลียดเป็นพิเศษ เกี่ยวกับเรื่องนี้ เราสามารถใช้ CSS เพื่อรีเซ็ตสไตล์ได้อย่างสมบูรณ์โดยไม่กระทบต่อความหมายหรือสิ่งอื่นใด มั่นใจได้ว่าเราสามารถปรับโครงสร้างใหม่ได้ แค่นั้นแหละ .
ฉันแค่อยากจะพูดเกี่ยวกับประสิทธิภาพของบทสนทนาที่นี่ ดังนั้นฉันจะไม่ทำอย่างนั้น
6. สรุปท้ายที่สุดแล้ว กล่องโต้ตอบคือแท็กเชิงความหมายสำหรับกล่องโต้ตอบป๊อปอัป และมีข้อดีเฉพาะบางประการ (เช่น ความสูงของระดับ webview) แม้ว่า Chrome จะรองรับเฉพาะตอนนี้เท่านั้น แต่ยังคงมีแนวโน้มที่ดีสำหรับการใช้งานในอนาคต และ ตอนนี้มันเข้ากันได้แล้ว ตอนนี้ในเบราว์เซอร์อื่น ๆ ให้ใช้ชุดกลไกการโต้ตอบด้วยตัวเอง (อาจมีแผนการดำเนินการสำหรับสิ่งนี้อยู่แล้ว ดังนั้นฉันจะไม่มองหามันที่นี่)
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network