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


ความคิดเห็น

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

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

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