รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้งาน Custom Data Attribute ใน HTML5 ?

    Custom Data Attribute เป็นความสามารถใหม่ใน html5 ช่วยให้การ Embed ข้อมูลต่างๆ ไว้ใน HTML Element ทำได้สะดวกยิ่งขึ้น ซึ่งประกอบไปด้วย 2 ส่วน ดังนี้
     
    Attribute Name ต้องขึ้นต้นด้วย “data-” แล้วตามด้วยชื่ออะไรก็ได้ที่เราต้องการ ความยาวอย่างน้อย 1 ตัวอักษร และเป็น lower case
     
    Attribute Value เป็นค่าอะไรก็ได้ ที่เราต้องการเก็บ
     
    ตัวอย่างการใช้งาน Custom Data Attribute
     
    <ul id="vegetable-seeds">
      <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
      <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
      <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
    </ul>
     
    จากตัวอย่างด้านบน เราต้องการแสดงรายชื่อคน 3 คน ได้แก่ Ball, Pla และ Tae แต่เราต้องการให้ Application รู้ด้วยว่า แต่ละคนมีชื่อจริงและเพศเป็นอะไร โดยที่ไม่ได้ต้องการให้แสดงผลออกมา กรณีเราจะใช้ Custom Data Attribute มาช่วยครับ ส่วนวิธีการนำค่าที่เก็บไว้มาใช้งาน ก็สามารถทำได้ง่าย ดังนี้ครับ
     
    สรุปเกี่ยวกับการใช้ Custom Data Attribute
    - สามารถดึงข้อมูลจาก HTML Element ได้โดยตรง ทำให้ไม่ต้องพึ่ง Ajax Call และ Server-Side Script ในการเชื่อมต่อฐานข้อมูล
    - Custom Data Attribute ถูกออกแบบมาเพื่อใช้เก็บข้อมูลสำหรับหน้า หรือ Application นั้นๆ เท่านั้น ไม่ใช่ Application ภายนอก ซึ่งตรงข้ามกับ Microformat
    - ไม่ควรใช้ Custom Data Attribute ในการอ้างอิงสำหรับใส่ Stylesheet ใดๆ จะใช้ Custom Data Attribute ก็ต่อเมื่อไม่มี Attribute หรือ HTML Element อื่นๆ ที่เหมาะสมกว่าแล้ว