วิธีการสร้าง UX ที่ดีขึ้นด้วย HTML5 Data- * คุณสมบัติ
คุณเคยต้องการที่จะเพิ่มข้อมูลที่กำหนดเองไปยังองค์ประกอบ HTML ที่เฉพาะเจาะจงเพื่อที่จะสามารถเข้าถึงได้ในภายหลังด้วย JavaScript หรือไม่? ก่อนที่ HTML5 จะปรากฏในตลาดการจัดเก็บข้อมูลที่กำหนดเองที่เกี่ยวข้องกับ DOM นั้นเป็นเรื่องยุ่งยากและนักพัฒนาต้องใช้แฮ็กที่น่ารังเกียจทุกชนิดเช่นการแนะนำแอตทริบิวต์ที่ไม่ได้มาตรฐานหรือใช้วิธี setUserData ที่ล้าสมัยเพื่อแก้ไขปัญหา.
โชคดีที่คุณไม่ต้องทำอะไรอีกเนื่องจาก HTML5 ได้เปิดตัวทั่วโลกใหม่ ข้อมูล-* แอตทริบิวต์ที่ทำให้สามารถฝังข้อมูลเพิ่มเติมในองค์ประกอบ HTML ใด ๆ ใหม่ ข้อมูล-* แอตทริบิวต์ ทำให้ HTML สามารถขยายได้มากขึ้น, ดังนั้น ช่วยให้คุณสร้างแอพที่ซับซ้อนมากขึ้น, และสร้างประสบการณ์ผู้ใช้ที่ซับซ้อนยิ่งขึ้นโดยไม่ต้องใช้เทคนิคที่ใช้ทรัพยากรมากเช่นการโทรอาแจ็กซ์หรือการสืบค้นฐานข้อมูลฝั่งเซิร์ฟเวอร์.
การสนับสนุนเบราว์เซอร์ของคุณสมบัติใหม่ระดับโลกนั้นค่อนข้างดีเนื่องจากเบราว์เซอร์สมัยใหม่รองรับ (IE8-10 รองรับบางส่วน).
ไวยากรณ์ของ ข้อมูล-* แอตทริบิวต์
ไวยากรณ์ของใหม่ ข้อมูล-* คุณลักษณะคล้ายกับของคุณลักษณะที่มีคำนำหน้าอาเรีย คุณสามารถแทรกสตริงตัวพิมพ์เล็กแทนการ * * * * สัญญาณ นอกจากนี้คุณยังต้องกำหนดค่าให้กับแต่ละแอตทริบิวต์ในรูปแบบของสตริง.
สมมติว่าคุณต้องการสร้าง เกี่ยวกับเรา หน้าและจัดเก็บชื่อของแผนกที่พนักงานแต่ละคนทำงาน คุณไม่ต้องทำอะไรนอกจากการเพิ่ม ข้อมูลแผนก แอตทริบิวต์ที่กำหนดเองให้กับองค์ประกอบ HTML ที่เหมาะสมด้วยวิธีดังต่อไปนี้:
- จอห์นโด
- Jane Doe
กำหนดเอง ข้อมูล-* คุณลักษณะเป็นโลกเช่นเดียวกับ ชั้น และ รหัส คุณลักษณะเพื่อให้คุณสามารถใช้พวกเขาในทุกองค์ประกอบ HTML คุณสามารถเพิ่มได้มาก ข้อมูล-* คุณลักษณะให้กับแท็ก HTML ตามที่คุณต้องการ ในตัวอย่างด้านบนตัวอย่างเช่นคุณสามารถแนะนำแอตทริบิวต์แบบกำหนดเองใหม่ที่เรียกว่า ข้อมูลของผู้ใช้ เพื่อจัดเก็บชื่อผู้ใช้ของพนักงาน.
- จอห์นโด
- Jane Doe
ตามกฎทั่วไปหากคุณต้องการเพิ่มแอตทริบิวต์ที่กำหนดเองของคุณเองไปยังองค์ประกอบ HTML คุณจะต้องนำหน้าด้วยเสมอ ข้อมูล- เชือก ในทำนองเดียวกันเมื่อคุณเห็นแอททริบิวต์ข้อมูลนำหน้าในรหัสของคนอื่นคุณสามารถรู้ได้ว่าเป็นแอททริบิวที่กำหนดเองที่ผู้แต่งแนะนำ.
เวลาที่จะใช้และเมื่อใดที่จะไม่ใช้คุณสมบัติที่กำหนดเอง
W3C กำหนดเอง ข้อมูล-* คุณลักษณะเช่นนั้น:
“แอตทริบิวต์ข้อมูลที่กำหนดเองมีวัตถุประสงค์เพื่อจัดเก็บข้อมูลที่กำหนดเองเป็นส่วนตัวในหน้าหรือแอปพลิเคชันซึ่งไม่มีแอตทริบิวต์หรือองค์ประกอบที่เหมาะสมอีกต่อไป.”
ควรพิจารณาใช้ ข้อมูล-* แอตทริบิวต์ เมื่อคุณไม่สามารถหาแอตทริบิวต์ความหมายอื่น ๆ สำหรับข้อมูลที่คุณต้องการจัดเก็บ.
ไม่ใช่ความคิดที่ดีที่สุดที่จะใช้พวกเขาเพื่อจุดประสงค์ในการออกแบบเท่านั้นซึ่งคุณสามารถเลือกได้จาก ชั้น และ สไตล์ แอตทริบิวต์ หากคุณต้องการจัดเก็บประเภทข้อมูลที่ HTML5 มีแอตทริบิวต์ความหมายเช่น วันเวลา คุณลักษณะสำหรับ องค์ประกอบให้ใช้สิ่งนั้นแทนแอตทริบิวต์ข้อมูลนำหน้า.
สิ่งสำคัญที่ควรทราบคือ ข้อมูล-* คุณลักษณะเก็บข้อมูลที่ ส่วนตัวไปยังหน้าหรือแอปพลิเคชัน, ซึ่งหมายความว่าตัวแทนผู้ใช้จะถูกเพิกเฉยเช่นบ็อตของเครื่องมือค้นหาและแอปพลิเคชันภายนอก แอ็ตทริบิวต์ที่นำหน้าด้วยข้อมูลสามารถเข้าถึงได้โดยรหัสที่ทำงานบนไซต์ที่โฮสต์ HTML เท่านั้น.
กำหนดเอง ข้อมูล-* คุณลักษณะถูกใช้อย่างกว้างขวางโดยเฟรมเวิร์กส่วนหน้าเช่น Bootstrap และ Zurb Foundation เช่นกัน ข่าวดีก็คือคุณไม่จำเป็นต้องรู้วิธีการเขียน JavaScript หากคุณต้องการใช้คุณลักษณะที่มีคำนำหน้าข้อมูลเป็นส่วนหนึ่งของเฟรมเวิร์กเนื่องจากคุณเพียงแค่เพิ่มลงในโค้ด HTML เพื่อเรียกใช้ฟังก์ชันของ ปลั๊กอิน JavaScript ที่เขียนไว้ล่วงหน้า.
ข้อมูลโค้ดด้านล่างเพิ่มคำแนะนำเครื่องมือทางด้านซ้ายเป็นปุ่มใน Bootstrap โดยใช้ประโยชน์จาก ข้อมูลสลับ และ ข้อมูลตำแหน่ง แอตทริบิวต์ที่กำหนดเองและกำหนดค่าที่เหมาะสมให้กับพวกเขา.
เป้า ข้อมูล-* คุณสมบัติที่มี CSS
แม้ว่าจะไม่แนะนำให้ใช้ ข้อมูล-* คุณลักษณะเฉพาะสำหรับวัตถุประสงค์ในการจัดแต่งทรงผมคุณสามารถเลือกองค์ประกอบ HTML ที่อยู่ในนั้นได้ด้วยความช่วยเหลือของตัวเลือกคุณสมบัติทั่วไป หากคุณต้องการเลือกแต่ละองค์ประกอบที่มีแอตทริบิวต์ข้อมูลนำหน้าให้ใช้ไวยากรณ์นี้ใน CSS ของคุณ:
li [ผู้ใช้ข้อมูล] color: blue;
โปรดทราบว่าไม่ใช่ชื่อผู้ใช้ที่จะแสดงเป็นสีน้ำเงินในข้อมูลโค้ดด้านบน - หลังจากข้อมูลทั้งหมดที่จัดเก็บในแอตทริบิวต์ที่กำหนดเองไม่ปรากฏให้เห็น - แต่ชื่อของพนักงานที่อยู่ใน องค์ประกอบ (ในตัวอย่าง “จอห์นโด” และ “Jane Doe”).
หากคุณต้องการเลือกองค์ประกอบที่แอตทริบิวต์ prefixed data ใช้ค่าบางค่านี่เป็นไวยากรณ์ที่จะใช้:
li [data-department = "IT"] border: solid blue 1px;
คุณสามารถใช้ CSS attribute selector ที่ซับซ้อนยิ่งขึ้นเช่นตัวเลือก sibling combinator selector ทั่วไป ([ข้อมูลค่า ~ = "foo"]) หรือตัวเลือกสัญลักษณ์แทน ([ข้อมูลค่า * = "foo"]) พร้อมแอ็ตทริบิวต์ที่นำหน้าด้วยข้อมูลเช่นกัน.
ทางเข้า ข้อมูล-* คุณสมบัติกับ JavaScript
คุณสามารถเข้าถึงข้อมูลที่เก็บไว้ในแบบกำหนดเอง ข้อมูล-* คุณสมบัติกับ JavaScript โดยใช้คุณสมบัติชุดข้อมูลหรือของ jQuery ข้อมูล() วิธี.
JavaScript วานิลลา
ชุด property เป็นทรัพย์สินของ HtmlElement อินเทอร์เฟซซึ่งหมายความว่าคุณสามารถใช้กับแท็ก HTML ใดก็ได้ ชุด คุณสมบัติให้การเข้าถึงแบบกำหนดเองทั้งหมด ข้อมูล-* คุณสมบัติขององค์ประกอบ HTML ที่กำหนด คุณลักษณะจะถูกส่งกลับเป็น DOMStringMap วัตถุที่มีหนึ่งรายการสำหรับแต่ละรายการ ข้อมูล-* คุณลักษณะ.
ในบ้านเรา เกี่ยวกับเรา ตัวอย่างหน้าคุณสามารถตรวจสอบแอตทริบิวต์ที่กำหนดเองได้อย่างง่ายดาย “Jane Doe” มีโดยใช้ ชุด ด้วยวิธีต่อไปนี้:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap ผู้ใช้: "janedoe", แผนก: "IT" คุณจะเห็นว่าในการกลับมา DOMStringMap คัดค้าน ข้อมูล- คำนำหน้าจะถูกลบออกจากชื่อของคุณลักษณะ (ผู้ใช้งาน แทน ข้อมูลของผู้ใช้, และ แผนก แทน ข้อมูลแผนก) คุณต้องใช้แอททริบิวในรูปแบบเดียวกันหากคุณต้องการเข้าถึงค่าของแอททริบิวต์ที่นำหน้าด้วยข้อมูลบางอย่างเท่านั้น (แทนที่จะเป็นรายการแอททริบิวที่กำหนดเองทั้งหมดเช่นในโค้ดขนาดด้านบน).
คุณสามารถดึงค่าของค่าเฉพาะได้ ข้อมูล-* คุณลักษณะเป็นคุณสมบัติของ ชุด คุณสมบัติ ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้คุณต้องละเว้น ข้อมูล- คำนำหน้าจากชื่อของคุณสมบัติดังนั้นหากคุณต้องการเข้าถึงค่าของ Jane ข้อมูลของผู้ใช้ คุณลักษณะคุณสามารถทำได้ด้วยวิธีนี้:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe ของ jQuery ข้อมูล() วิธี
ข้อมูล() วิธีการ jQuery ทำให้สามารถรับค่าของแอตทริบิวต์คำนำหน้าข้อมูล ที่นี่คุณต้องละเว้น ข้อมูล- คำนำหน้าจากชื่อของแอตทริบิวต์เพื่อเข้าถึงอย่างถูกต้อง ในตัวอย่างของเราคุณสามารถแสดงข้อความแจ้งเตือนด้วยชื่อของแผนกที่ “เจน” ทำงานร่วมกับรหัสต่อไปนี้:
$ ("# jane"). hover (function () var department = $ ("# jane"). data ("department"); alert (department);); ข้อมูล() จำเป็นต้องใช้วิธีการอย่างระมัดระวังเนื่องจากไม่เพียงทำหน้าที่เป็นวิธีรับค่าของคุณลักษณะข้อมูลนำหน้า แต่ยังแนบข้อมูลไปยังองค์ประกอบ DOM ด้วยวิธีต่อไปนี้:
var town = $ ("# jane"). data ("town", "New York"); ข้อมูลเพิ่มเติมที่คุณแนบมากับ jQuery ข้อมูล() เห็นได้ชัดว่าวิธีการจะไม่ปรากฏในรหัส HTML เป็นใหม่ ข้อมูล-* คุณลักษณะดังนั้นหากใช้เทคนิคทั้งสองในเวลาเดียวกันองค์ประกอบ HTML ที่กำหนดจะเก็บข้อมูลสองชุดชุดหนึ่งมี HTML และอีกชุดหนึ่งมี jQuery.
ในตัวอย่างของเรา “เจน” ได้รับข้อมูลที่กำหนดเองใหม่ ("เมือง") กับ jQuery แต่คู่คีย์ - ค่าใหม่นี้จะไม่ปรากฏใน HTML เหมือนใหม่ ข้อมูลเมือง คุณลักษณะ การจัดเก็บข้อมูลด้วยวิธีที่ต่างกันสองวิธีไม่ใช่วิธีที่ดีที่สุดในการพูดอย่างน้อยที่สุด ใช้หนึ่งในสองวิธีเท่านั้นในคราวเดียว.
การเข้าถึงและ ข้อมูล-* แอตทริบิวต์
เป็นข้อมูลที่จัดขึ้นในประเพณี ข้อมูล-* คุณลักษณะเป็นส่วนตัวเทคโนโลยีช่วยเหลืออาจไม่สามารถเข้าถึงได้ หากคุณต้องการให้เนื้อหาของคุณสามารถเข้าถึงได้สำหรับผู้ใช้ที่ถูกปิดใช้งานไม่แนะนำให้เก็บเนื้อหาที่มีความสำคัญสำหรับผู้ใช้ด้วยวิธีนี้.
