Tutorial Intel XDK - Image on Listview - Workshop 7

การแสดงรูปภาพบน Listview สามารถกำหนดให้แสดงได้ 2 แบบ คือ

- แสดงแบบ Icon จะแสดงไอคอนไว้ทางซ้ายมือของรายการเพื่อบ่งบอกสถานะ
- Thumbnail จะแสดงรูปทางซ้ายมือเพื่อบอกรายละเอียดของรายการ

หลักการกำหนดรูปภาพจะใช้แท็ก <img> ไว้ภายใต้แท็ก <li> หรือกาหนดไว้ภายใต้แท็ก <a> (ถ้ามีการเชื่อมโยง) ซึ่งอยู่ภายใต้แท็ก <li> โดยถ้าเป็น Icon ต้องกาหนดคุณสมบัติ class='ui-li-icon' ให้กับแท็ก <img> ส่วน Thumbnail ไม่ต้องกำหนดอะไร สำหรับขนาดภาพของ Thumbnail มีขนาด 80 x 80 pixel ส่วน Icon มีขนาดภาพเป็น 40 x 40 pixel

การกำหนดภาพสาหรับ Thumbnail

1. สร้าง New Project แบบ Blank Project ชื่อ Thumbnail
2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้แทน

3. สร้าง Folder ชื่อ images ไว้ที่ Thumbnail/www พร้อมหาภาพตามขนาดที่กำหนด
4. ทดลองโปรแกรมโดยคลิกที่ Emulate

การกำหนด Icon

1. สร้าง New Project แบบ Blank Project ชื่อ Icon
2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้แทน

3. สร้าง Folder ชื่อ images ไว้ที่ Icon/www พร้อมหาภาพตามขนาดที่กำหนด
4. ทดลองโปรแกรมโดยคลิกที่ Emulate

 

การสร้างตัวกรองเนื้อหาใน Listview

สำหรับ jquery ได้กำหนดคุณสมบัติสาหรับกรองเนื้อหาใน Listview ด้วยคุณสมบัติ data-filter โดยที่ jQuery จะสร้างแท็ก input type='search' ให้อัตโนมัติ

การสร้างตัวกรองเนื้อหา

1. สร้าง New Project แบบ Blank Project ชื่อ filter
2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้แทน

3. ทดลองโปรแกรมโดยคลิกที่ Emulate

ในช่อง Filter items เมื่อพิมพ์ข้อมูลโปรแกรมจะทาการกรองข้อมูลที่มีตัวอักษรนั้นอยู่ให้เองอัตโนมัติ

การสร้างการเชื่อมโยงข้อมูล (Link)

การสร้างลิงค์ใน Listview สามารถสร้างได้โดยใช้แม็ก a ไว้ภายใต้แท็ก li โดยสามารถกำหนดได้ 2 แบบดังนี้

• Popup กำหนดได้โดยใช้คุณสมบัติ data-rel = 'popup'  จะปรากฏข้อความที่เชื่อมโยง popup ขึ้น
• Dialog กำหนดได้โดยใช้คุณสมบัติ data-rel = 'dialog'  จะแสดงเป็นหน้าเว็บเพจ

การเชื่อมโยงข้อมูล

1. สร้าง New Project แบบ Blank Project ชื่อ link
2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้แทน 

3. ทดลองโปรแกรมโดยคลิกที่ Emulate