ถัดไป ก่อนหน้า

3.6 Listviews

   List basics & API

   ใช้สำหรับแสดงข้อมูล , ระบบนำทาง,รายการแสดงผล และ การป้อนข้อมูล โดย jQuery MobileมีประเภทและรูปแบบของListมากมายให้เลือกใช้ ซึ่งListทั้งหมดจะเริ่มด้วย HTML list markup และเรียกใช้รูปแบบจากList เช่น read-only, linked, numbered, nested, collapsible ฯลฯ
   เริ่มต้น Listview จะมีขนาดความกว้างที่เต็มหน้าจอ แต่สามารถกำหนดได้จาก inset styled ซึ่งเป็นวิธีง่ายๆด้วยการเพิ่มsearch filter และ automatic dividersเพื่อให้ง่ายต่อการพัฒนา

1 Listviews Basics

   1.1 Basic linked lists
     Listview เป็นการเรียงลำดับรายการที่มีการเชื่อมโยงข้อมูล โดยใช้ attribute: data-role="listview" ซึ่งjQuery Mobile จะใช้ ListView ที่มีตัวบ่งชี้เป็นลูกศรอยู่ทางด้านขวา เมื่อมีการแตะลงบนรายการใด frameworkจะผูกคลิกไว้ภายใน โดยใช้ AJAXเป็นตัวร้องขอ URL ในการเชื่อมโยง และสร้างเพจใหม่ขึ้นไว้ใน DOMแล้วออกจากการเปลี่ยนเพจ
     สามารถดู attribute ที่เพิ่มลงใน listviews ได้เพิ่มเติมใน data- attribute reference ตัวอย่าง HTML markup for a basic linked list

CD ไฟล์ : Basic linked lists.html

1.2 Nested lists

รายการที่ซ้อนกัน

   การสร้างรายการที่ซ้อนกันสามารถสร้างรายการย่อยไว้ภายใน <ul> หรือ< ol> โดยจะซ้อนกัน เป็นชั้นๆไปเรื่อยๆแบบอัตโนมัติ โดยเพจของแต่ละรายการย่อย จะสร้างขึ้นเมื่อเพจหลักถูกโหลด และแต่ละเพจย่อยจะมีการผูกevent ของเพจเอาไว้ในการกำหนดสีธีมให้กับ Listview สามารถกำหนดโดยเพิ่ม attribute : data-theme ลงในแต่ละรายการ

CD ไฟล์ : Nested list.html

1.3 Numbered lists

   สามารถสร้างได้จาก<ol>ซึ่งจะเป็นประโยชน์เมื่อต้องการแสดงรายการที่เป็นลำดับ เช่นผลการค้นหา หรือคิวภาพยนตร์
   jQuery Mobile พยายามเพิ่มลำดับให้กับList โดยใช้ CSS แต่ถ้าไม่สนับสนุน CSS จะกลับไปใช้ JavaScript

CD ไฟล์ : Numbered list.html

1.4 Read-only lists

   listviews สามารถใช้เพื่อแสดงรายการที่ไม่ใช่แบบโต้ตอบของรายการ List นี้สร้างขึ้น จาก unordered หรือ ordered ที่ไม่มีการเชื่อมโยงในรายการ โดยมีรูปแบบคือ รายการเป็นปุ่มเหมือนชนิดรายการอื่น ๆ แต่จะกำหนดพื้นหลังเป็นแบบ gradient ไม่ได้

Read-only lists

CD ไฟล์ : samplelist.html

Read-only inset lists

CD ไฟล์ : Readonly Inset Lists.html

1.5 Split button lists

ตัวอย่างโค้ด