Tutorial Intel XDK - Create Listview Type - Workshop 6

Workshop 6 การสร้าง Listview แบบต่าง ๆ

ใน Workshop 5 ได้กล่าวถึงการกาหนดคุณสมบัติ data-role listview ใน jQuery ที่ส่งผลให้การใช้แท็ก

และแท็ก

มีการแสดงผลที่แตกต่างจากการทางานของ HTML ปกติ ใน Workshop 6 จะนาคุณสมบัติต่าง ๆ ที่ใช้กาหนดการทางานของ Listview ให้แตกต่างกันไป

A. การสร้าง Listview แบบ inset

เป็นการกาหนดให้ Listview ของแท็ก

และ

มีขอบแบบขอบมนสวยงาม

กิจกรรมที่ 1 การสร้าง Lisiview แบบ inset

1. สร้าง New Project แบบ a Blank Project โดยกาหนดชื่อ listviewinset

2. ลบ Code เดิมแล้วพิมพ์ Code ใหม่ดังนี้ 

3. Copy ไฟล์ jQuery ประกอบด้วย jquery.mobile-1.3.2.min.css,jquery.js และไฟล์ jquery.mobile-1.3.2.min.js ไว้ใน Folder css และ js

4. ทดสอบ Project จะได้ผลลัพธ์ดังนี้

B. การสร้าง Listview แบบ list-divider

คุณสมบัติของ data-role สามารถกาหนดให้การแบ่งกลุ่มรายการได้ด้วย list-divider ซึ่งผู้สร้างสามารถแบ่งหมวดหมู่รายการได้อย่างชัดเจน รูปแบบการใช้จะใช้งานเป็น property ของแท็กดังนี้

กิจกรรมที่ 2 การใช้ list-divider

1. สร้าง New Project แบบ Blank Project กำหนดชื่อเป็น listdivider

2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้

3. Copy ไฟล์ jquery.mobile-1.3.2.min.css ไว้ใน listdivider/www/css

4. Copy ไฟล์ jquery.js และไฟล์ jquery.mobile-1.3.2.min.js ไว้ใน listdivider/www/js 

5. ทดลองโปรเจ็คโดยคลิกที่ Emulate จะได้ผลลัพธ์ดังภาพ

 

C. การสร้าง Listview แบบซ้อนกัน (Nested Listview)

การแบ่งกลุ่มรายการสามารถทาได้อีกแบบหนึ่งโดยการใช้แท็ก ul และ li ซ้อนกันในโครงสร้างดังนี้

กิจกรรมที่ 3 การใช้ Listview แบบซ้อนกัน

1. สร้าง New Project แบบ Blank Project กาหนดชื่อ nested

2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้

 

3. Copy ไฟล์ jQuery ประกอบด้วย jquery.mobile-1.3.2.min.css,jquery.js และไฟล์ jquery.mobile-1.3.2.min.js ไว้ใน Folder css และ js 

4. ทดสอบ Project จะได้ผลลัพธ์ดังนี้  

D. การสร้าง Listview แบบ Collapsible

นอกจากการสร้างรูปแบบการแบ่งรายการแบบซ้อนกันแล้ว สามารถสร้างได้อีกวิธีหนึ่งคือแบบ Collapsible ด้วยคุณสมบัติ data-role = collapsible ให้กับแท็ก div แล้วนาแท็ก ul โดยกาหนดคุณสมบัติ data-role =listviewวางไว้ภายใต้แท็ก div ดังนี้ 

กิจกรรมที่ 4 การสร้าง Collapsible Listview

1. สร้าง New Project แบบ Blank Project กำหนดชื่อ collapsible

2. ลบ Code เดิมทั้งหมดแล้วพิมพ์ Code ต่อไปนี้

3. Copy ไฟล์ jQuery ประกอบด้วย jquery.mobile-1.3.2.min.css,jquery.js และไฟล์ jquery.mobile-1.3.2.min.js ไว้ใน Folder css และ js

4. ทดสอบ Project จะได้ผลลัพธ์ดังนี้