Sync Code

  Workshop 5 Listview : การจัดรูปแบบลิสต์รายการด้วย jQuery Listview คือ รูปแบบการจัดเนื้อหาในส่วน content ของหน้าจอให้แสดงผลแบบลิสต์รายการ ซึ่งจะจัดรูปแบบด้วยแท็ก หรือ ของ HTML โดย jQuery Mobile จะปรับเปลี่ยนรูปแบบแสดงผลเป็นแบบ Rich Control ซึ่งมีความสวยงามและเด่นชัดน่าใช้งาน Listview สร้างโดยการกำหนดคุณสมบัติ data-role = “listview” ซึ่งหากไม่กำหนดจะเป็นการแสดงรายการแบบปกติของ HTML กิจกรรมที่ 1 การสร้าง Listview ด้วย HTML 1. สร้าง Project ใหม่แบบ Start with a Blank Project โดยตั้งชื่อว่า Listview1 2. ลบ Code ทั้งหมดและพิมพ์ Code ต่อไปนี้ 3. ให้ copy ไฟล์ css ชื่อ jquery.mobile-1.3.2.min.css ไว้ที่ Folder ที่สร้าง Project ไว้คือ Listview1->www->css 4. ให้ copy ไฟล์ javascript จานวน 2 ไฟล์คือ jquery.js และ jquery.mobile-1.3.2.min.js ไว้ที่ Folder Listview1->www->js 5. ทดสอบ App โดยคลิกที่ Emulate 6. จะได้ผลลัพธ์ดังภาพ

ข้อมูล Workshop 4 : การสร้าง App แปลง Dollar เป็นเงินบาท   หลักการ - สร้างไฟล์ด้วย HTML5 และ CSS เพื่อกาหนด User Interface (UI) - สร้างไฟล์ด้วย Javascript เพื่อประมวลผล   กิจกรรมที่ 1 สร้างไฟล์ index.html 1. ให้นักเรียนสร้างไฟล์ HTML5 ด้วย Intel XDK โดยสร้าง Project ใหม่ด้วย Blank Project 2. ลบ Code ทั้งหมดแล้วพิมพ์ Code ใหม่ดังนี้  กิจกรรมที่ 2 สร้างไฟล์ myclass.css 1. คลิกที่ File->New 2. พิมพ์ Code ต่อไปนี้    3. บันทึก File ไว้ที่โฟร์เดอร์ css ชื่อ myclass.css กิจกรรมที่ 3 สร้างไฟล์ index.js ( ไฟล์ประมวลผลด้วยภาษาจาวา ) 1. คลิกที่ File->New 2. พิมพ์ Code ดังนี้    3. บันทึกไว้ที่โฟร์เดอร์ js ชื่อ index.js    ทดสอบแสดงผล