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




ความคิดเห็น

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

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

การ 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 ...
อ่านต่อ »