Sync Code

การแสดงรูปภาพบน 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. ทดลองโป

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 การใช้