jQuery Mobile มุมมองรายการ

jQuery Mobile มุมมองรายการ

ตัวแสดงรายการที่มีอยู่ใน jQuery Mobile คือรายการ HTML มาตรฐาน: รายการที่มีลำดับ (<ol>) และรายการที่ไม่มีลำดับ (<ul>):

ถ้าคุณต้องการสร้างรายการ ให้เพิ่มคุณสมบัติ data-role="listview" บนองค์ประกอบ <ol> หรือ <ul> โดยเมื่อต้องการให้รายการนี้สามารถคลิกได้ ให้กำหนดลิงก์ในแต่ละรายการ (<li>):

ตัวอย่าง

<ol data-role="listview">
  <li><a href="#">รายการ</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">รายการ</a></li>
</ul>

ทดลองด้วยตัวเอง

ถ้าคุณต้องการเพิ่มมุมโค้งและมุมเบื้องด้านของรายการ ใช้คุณสมบัติ data-inset="true" นี้:

ตัวอย่าง

<ul data-role="listview" data-inset="true">

ทดลองด้วยตัวเอง

คำเตือน：โดยมาตรฐาน รายการในรายการจะแปลงเป็นปุ่มอัตโนมัติ (ไม่จำเป็นต้องใช้ data-role="button")

ตัวแบ่งรายการ

ตัวแบ่งรายการ (List Dividers) ใช้เพื่อจัดรายการและประกอบรายการเป็นหมวดหมู่/ช่วง

ถ้าคุณต้องการกำหนดตัวแบ่งรายการในรายการ ให้เพิ่มคุณสมบัติ data-role="list-divider" บนองค์ประกอบ <li>:

ตัวอย่าง

<ul data-role="listview">
 <li data-role="list-divider">ยุโรป</li>
  <li><a href="#">ฝรั่งเศส</a></li>
  <li><a href="#">เยอรมัน</a></li>
</ul>

ทดลองด้วยตัวเอง

ถ้ารายการของคุณเป็นลำดับอักษร (เช่น บัญชีที่ติดต่อ) จะมีการเพิ่มตัวแบ่งรายการที่เหมาะสมโดยอัตโนมัติโดย jQuery Mobile โดยการตั้งคุณสมบัติ data-autodividers="true" บนองค์ประกอบ <ol> หรือ <ul>:

ตัวอย่าง

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

ทดลองด้วยตัวเอง

คำเตือน：คุณสมบัติ data-autodividers="true" จะสร้างตัวแบ่งรายการโดยใช้ตัวอักษรหลักของข้อความรายการในรายการให้เป็นตัวใหญ่

เครื่องค้นหา

ถ้าคุณต้องการเพิ่มช่องค้นหาในรายการ ใช้คุณสมบัติ data-filter="true" นี้:

ตัวอย่าง

<ul data-role="listview" data-filter="true"</ul>

ทดลองด้วยตัวเอง

โดยมาตรฐาน ข้อความในช่องค้นหาคือ "Filter items..."。

ถ้าต้องการแก้ไขข้อความปกติ โปรดใช้คุณสมบัติ data-filter-placeholder ครับ

ตัวอย่าง

<ul data-role="listview" data-filter="true" data-filter-placeholder="ค้นหาชื่อ">

ทดลองด้วยตัวเอง

ตัวอย่างเพิ่มเติม

รายการที่มีสิทธิ์เข้าถึงแบบอ่านเท่านั้น
วิธีการสร้างรายการที่ไม่มีลิงก์ (ไม่ใช่ปุ่ม ไม่สามารถคลิกได้)