Tutorial Intel XDK - Listview jQuery - Workshop 5

โดย -


 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. จะได้ผลลัพธ์ดังภาพ

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การ Comment ในภาษา PHP

โดย -
รูปภาพ
การ Comment ในภาษา PHP มีด้วยกันอยู่ 3 แบบครับ  แบบที่ 1 : ใช้ # ... ใช้สำหรับ : คอมเม้นต์แบบบรรทัดเดียว ตัวอย่าง  <?php #คอมเม้น # คอมเม้น ?> แบบที่ 2 : ใช้ // ... ใช้สำหรับ : คอมเม้นต์แบบบรรทัดเดียว ตัวอย่าง  <?php //คอมเม้น // คอมเม้น ?> แบบที่ 3 : ใช้ /* ... */ ใช้สำหรับ : คอมเม้นต์แบบหลายบรรทัด ตัวอย่าง  <?php /*คอม เม้น*/ /* คอม เม้น */ ?> ในการ Comment แบบบรรทัดเดียวนั้น ถ้าเราเคาะ Enter ลงมาโดยไม่ใส่เครื่องหมาย Comment ด้านหน้าจะทำให้โปรแกรม Error ได้ครับ ข้อความที่อยู่ในคอมเม้นต์จะไม่ถูกแสดงผลออกมา
อ่านต่อ »

แท็ก PHP การเปิดปิดแท็ก

โดย -
รูปภาพ
ถ้าเราจะแทรกภาษา PHP เข้าร่วมกับ HTML เราจะต้องเปิดแท็ก PHP และปิดแท็ก PHP ก่อนเสมอก่อนที่จะสลับไปมาระหว่าง HTML กับ PHP  การแทรก PHP ใน HTML <html> <head> <meta charset="UTF-8"></meta> </head> <body> <!-- เปิดส่วนของ PHP --> <?php echo 'Hello World'; ?> <!-- ปิดส่วนของ PHP --> </body> </html> การแทรก HTML ใน PHP <?php echo '<html> <head> <meta charset=\"UTF-8\"></meta> </head> <body> Hello World </body> </html>'; ?> การใช้ PHP แทรกใน HTML <html> <head> <meta charset="UTF-8"></meta> </head> <body> <a href="helloworld.php?action=<?php echo 'edit';?> ">แก้ไข</a> </body> </html> จะได้ผลออกมาดังนี้หลังจากกดคำว่าแก้ไข URL จะเปลี่ยน หรือว่าเราสามารถแทรกโค๊ด HTML เข้าไปใน PHP ได้อีก โดยสองวิธีนี้ (ใหม่...
อ่านต่อ »

ใช้ Word ให้เรียกข้อมูลจาก Excel ในแต่ละแถวมาแสดง import data from excel to show in word

โดย -
รูปภาพ
  Use Word to show data from excel in a row to print Microsoft Office 2007 2010 2013 Tips & Trick บางคนอาจประสบปัญหาการทำใบเสร็จ การทำใบเกรด อยากจะให้ข้อมูลมามาแสดงในแต่ละหน้า โดยไม่ต้องนั่งพิมพ์ใหม่ทีละหน้า สามารถเรียกไฟล์ข้อมูล Excel ที่เรามีอยู่แล้วมาใช้ได้เลยครับ โดยการใช้รูปแบบจดหมายของ Word ที่มีมาให้  หลายคนอาจจะถามว่าใช้ทำไม นั่งพิมพ์เอาก็ได้ ถ้าลองคิดเล่นๆดูมีข้อมูลมากมายหลายร้อยหลายพันคนที่ถูกเรียกเก็บมาจาก Google Form แล้วต้องการมาทำใบเสร็จ ใบประเมิน เราก็คงจะขี้เกียจไม่น้อยที่จะต้องมานั่งพิมพ์ทีละคนใช่ไหมครับ ดังนั้นเทคนิคนี้จะช่วยให้คุณประหยัดเวลาไปนั่งพักผ่อนหรือทำอะไรได้อีกมากเลยครับ มาเริ่มทำกันเลยดีกว่า เพื่อไม่ให้เป็นการเสียเวลานะครับ เราต้องมีไฟล์ข้อมูลของ Excel โดยมีข้อมูลเป็นแถวๆ ตารางข้อมูลใน Excel ตัวอย่างในรูปภาพผมมีข้อมูลจำนวน 4 คน แต่ละคนมีข้อมูลแยกออกไป ชื่อ นามสกุล อายุ วันเกิด เบอร์โทร ผมอยากให้มีใบแจ้งออกมาทีละคน ว่าคนนี้มีรหัสที่เท่าไหร ชื่อ นามสกุลอะไร วันเกิด อายุ เบอร์โทร ผมก็ทำการเก็บข้อมูลมาไว้ในไฟล์ Excel ...
อ่านต่อ »