ความคิดเห็น: เมื่อคุณพูดถึง "HTML5" ในฝูงชนคุณอาจรู้สึกเหมือนนักเต้นที่แปลกใหม่หรือยูนิคอร์นมากลางบ้านด้วยความหมายที่ชัดเจนว่า "ฉันเจ๋งฉันรู้"
สิ่งนี้ไม่สามารถพูดได้ว่าเราไร้สาระ HTML API ขั้นพื้นฐานไม่ได้พัฒนาในช่วงไม่กี่ปีที่ผ่านมาดังนั้นเมื่อมีคุณสมบัติใหม่เล็ก ๆ น้อย ๆ ปรากฏขึ้นเช่นตัวยึดมันจะทำให้เราดูนวนิยาย แม้ว่าคุณสมบัติ HTML5 จำนวนมากจะถูกนำไปใช้ในเบราว์เซอร์ใหม่ แต่โปรแกรมเมอร์ส่วนใหญ่ยังไม่ทราบหรือไม่เคยได้ยิน API ขนาดเล็กที่มีประโยชน์มาก ในบทความนี้ฉันจะแนะนำ API ดังกล่าวและยินดีต้อนรับทุกคนให้ค้นพบ HTML5 APIs ที่ไม่รู้จักมากขึ้น!
Element.ClassList
API ClassList ให้ฟังก์ชั่นพื้นฐานของการควบคุม CSS ที่เราได้นำไปใช้ในช่วงหลายปีที่ผ่านมาโดยใช้ไลบรารีเครื่องมือ JavaScript:
// เพิ่มคลาส CSS
myelement.classlist.add ("Newclass");
// ลบคลาส CSS
myelement.classlist.remove ("มีอยู่จริง");
// ตรวจสอบว่าคุณมีคลาส CSS หรือไม่
myelement.classlist.contains ("oneclass");
// ย้อนกลับการดำรงอยู่หรือไม่ของคลาส CSS
myelement.classlist.toggle ("Anotherclass");
ค่าหลักของ API ที่เกิดขึ้นใหม่นี้คือ: ง่ายและใช้งานได้จริง
ContextMenu API
ContextMenu API ใหม่นี้มีประโยชน์มาก: ไม่ได้แทนที่เมนูคลิกขวาดั้งเดิม แต่เพิ่มเมนูคลิกขวาที่กำหนดเองของคุณลงในเมนูคลิกขวาในเบราว์เซอร์:
<section contextMenu = "mymenu">
<!-เพิ่มเมนู->
<menu type = "บริบท">
<menuitem label = "Refresh Post" icon = "/images/refresh-icon.png"> </enuitem>
<menu label = "Share on ... " icon = "/images/share_icon.gif">
<menuitem label = "twitter" icon = "/images/twitter_icon.gif"> </enuitem>
<menuitem label = "facebook" icon = "/images/facebook_icon16x16.gif"> </enuitem>
</เมนู>
</เมนู>
</section>
ควรสังเกตว่าเป็นการดีที่สุดที่จะใช้ JavaScript เพื่อสร้างรหัสเมนูเหล่านี้แบบไดนามิกเนื่องจากเหตุการณ์เมนูจะเรียก JavaScript ในที่สุดเพื่อเรียกใช้งาน หากผู้ใช้ห้าม JavaScript เมนูคลิกขวาจะไม่ถูกสร้างขึ้นและเขาจะไม่เห็นเมนูในเวลาเดียวกัน
element.dataset
การใช้ชุดข้อมูล API โปรแกรมเมอร์สามารถรับหรือตั้งค่าข้อมูล-* คุณสมบัติที่กำหนดเองได้อย่างง่ายดาย:
/* รหัสต่อไปนี้เป็นตัวอย่าง
<div data-name = "mydiv" data-id = "myid" data-my-custom-key = "นี่คือค่า"> </div>
-
// รับองค์ประกอบ
var element = document.getElementById ("mydiv");
// รับ ID
var id = element.dataset.id;
// อ่านค่าของ "data-my-custom-key"
var customkey = element.dataset.mycustomkey;
// แก้ไขเป็นค่าอื่น ๆ
element.dataset.mycustomkey = "ค่าอื่น ๆ ";
// เปิดออก:
// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "ค่าอื่น ๆ "> </div>
ไม่จำเป็นต้องพูดมันเป็นเรื่องง่ายและใช้งานได้จริงเหมือนรายการชั้นเรียน
window.postMessage API
แม้แต่ IE8 ก็สนับสนุน API postmessage มาหลายปีแล้ว ฟังก์ชั่นของ API postmessage คือช่วยให้คุณสามารถส่งข้อมูลข้อมูลระหว่าง Windows เบราว์เซอร์สองตัวหรือ iFrames:
// จากหน้าต่างหรือ iframe บนโดเมน A ส่งข้อความไปยังหน้าต่างหรือ ifame ในโดเมน B.
var iframewindow = document.getElementById ("iframe"). contentWindow;
iframewindow.postMessage ("ทักทายจากหน้าต่างแรก!"); </p> <p> // รับข้อความในหน้าต่างหรือ iframe ในโดเมนที่สองที่แตกต่างกัน
window.addeventListener ("ข้อความ", ฟังก์ชั่น (เหตุการณ์) {
// ทดสอบความถูกต้องตามกฎหมายของโดเมน
if (event.origin == "http://www.vevb.com") {
// ข้อมูลบันทึกเอาต์พุต
console.log (event.data);
// ข้อความตอบกลับ
Event.source.postMessage ("คุณเป็นอย่างไรบ้าง!");
-
-
เนื้อหาข้อความสามารถเป็นสตริงได้เท่านั้น แต่คุณสามารถใช้ JSON.Stringify และ JSON.parse เพื่อแปลงข้อความเป็นข้อมูลข้อมูลที่มีความหมายมากขึ้น!
แอตทริบิวต์อัตโนมัติ
แอตทริบิวต์ออโต้โฟกัสสามารถสร้างปุ่มอินพุตหรือองค์ประกอบ textarea กลายเป็นจุดสนใจของหน้าเว็บโดยอัตโนมัติเมื่อโหลดหน้าเว็บ:
<อินพุต autofocus = "autofocus" />>
<ปุ่ม autofocus = "autofocus"> สวัสดี! </ button>
<textarea autofocus = "autofocus"> </ceplarea>
ในสถานที่เช่นหน้าค้นหาของ Google ที่มีรูปแบบคงที่คุณสมบัติ AutoFocus เป็นคุณสมบัติที่เหมาะ
เบราว์เซอร์รองรับ API แต่ละตัวแตกต่างกันเล็กน้อยดังนั้นตรวจสอบการสนับสนุนสำหรับคุณสมบัติเหล่านี้ก่อนใช้งาน ใช้เวลาสักครู่ในการอ่านคำอธิบายโดยละเอียดของ API แต่ละตัวและฉันเชื่อว่าคุณจะพบมากขึ้น