รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทํา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 อื่นๆ ที่เหมาะสมกว่าแล้ว

     

     

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

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com