Xem trước danh sách jQuery Mobile

Xem trước danh sách jQuery Mobile

Danh sách xem trong jQuery Mobile là danh sách HTML tiêu chuẩn: danh sách có thứ tự (<ol>) và danh sách không có thứ tự (<ul>).

Nếu bạn muốn tạo danh sách, hãy thêm thuộc tính data-role="listview" vào yếu tố <ol> hoặc <ul>. Để làm cho các mục có thể nhấp, hãy quy định liên kết trong mỗi mục (<li>):

Ví dụ

<ol data-role="listview">
  <li><a href="#">Mục danh sách</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Mục danh sách</a></li>
</ul>

Thử ngay

Nếu bạn muốn thêm góc tròn và cạnh biên cho danh sách, hãy sử dụng thuộc tính data-inset="true":

Ví dụ

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

Thử ngay

Lưu ý:Mặc định, các mục trong danh sách sẽ tự động chuyển đổi thành nút (không cần data-role="button").

Dấu phân cách danh sách

Dấu phân cách danh sách (List Dividers) được sử dụng để tổ chức và kết hợp các mục thành các danh mục/section.

Nếu bạn muốn quy định dấu phân cách danh sách, hãy thêm thuộc tính data-role="list-divider" vào yếu tố <li>:

Ví dụ

<ul data-role="listview">
 <li data-role="list-divider"> Âu châu</li>
  <li><a href="#">Pháp</a></li>
  <li><a href="#">Đức</a></li>
</ul>

Thử ngay

Nếu danh sách của bạn là theo thứ tự chữ cái (ví dụ như danh sách liên hệ), jQuery Mobile sẽ tự động thêm các dấu phân cách phù hợp bằng cách đặt thuộc tính data-autodividers="true" trên các yếu tố <ol> hoặc <ul>:

Ví dụ

<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>

Thử ngay

Lưu ý:Thuộc tính data-autodividers="true" sẽ tạo ra các dấu phân cách bằng cách viết hoa chữ cái đầu của văn bản của các mục trong danh sách.

Bộ lọc tìm kiếm

Nếu bạn muốn thêm hộp tìm kiếm vào danh sách, hãy sử dụng thuộc tính data-filter="true":

Ví dụ

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

Thử ngay

Mặc định, văn bản trong hộp tìm kiếm là "Lọc các mục..."。

Nếu muốn thay đổi văn bản mặc định, hãy sử dụng thuộc tính data-filter-placeholder:

Ví dụ

<ul data-role="listview" data-filter="true" data-filter-placeholder="Tìm kiếm tên">

Thử ngay

Thử thêm các ví dụ

Danh sách chỉ đọc
Cách tạo danh sách không có liên kết (không phải nút, không thể nhấn).