Nội dung danh sách jQuery Mobile

Hình thu nhỏ danh sách jQuery Mobile

Đối với hình ảnh lớn hơn 16x16px, hãy thêm yếu tố <img> vào liên kết.

jQuery Mobile sẽ tự động điều chỉnh hình ảnh đến 80x80px:

Ví dụ

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Thử ngay

Hãy sử dụng HTML tiêu chuẩn để lấp đầy danh sách có thông tin:

Ví dụ

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome là trình duyệt web mã nguồn mở miễn phí. Được phát hành vào năm 2008.</p>
    </a>
  </li>
</ul>

Thử ngay

Biểu tượng danh sách jQuery Mobile

Nếu bạn muốn thêm biểu tượng 16x16px vào danh sách của bạn, hãy thêm thuộc tính class="ui-li-icon" vào yếu tố <img>.

Ví dụ

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

Thử ngay

Nút phân chia

Nếu bạn muốn tạo danh sách phân chia có thanh phân tách dọc, hãy đặt hai liên kết trong yếu tố <li>.

jQuery Mobile sẽ tự động thêm phong cách biểu tượng mũi tên xanh cho liên kết thứ hai, văn bản trong liên kết (nếu có) sẽ hiển thị khi người dùng cuộn qua biểu tượng này:

Ví dụ

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Văn bản nào đó</a>
  </li>
</ul>

Thử ngay

Bằng cách thêm trang và hộp thoại, bạn có thể làm cho liên kết mạnh mẽ hơn:

Ví dụ

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Tải xuống trình duyệt</a>
  </li>
</ul>

Thử ngay

Bong bóng đếm

Bong bóng đếm được sử dụng để hiển thị số lượng liên quan đến mục danh sách, ví dụ như tin nhắn trong hộp thư:

Nếu bạn muốn thêm bong bóng đếm, hãy sử dụng yếu tố nội bộ, ví dụ như <span>, thiết lập thuộc tính class "ui-li-count" và thêm số:

Ví dụ

<ul data-role="listview">
  <li><a href="#">Hộp thư đến<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Gửi<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Rác<span class="ui-li-count">7</span></a></li>
</ul>

Thử ngay

Chú ý:Để hiển thị số chính xác trong bóng đếm, bạn phải cập nhật chương trình hóa. Chúng ta sẽ giải thích trong chương tiếp theo.

Các ví dụ thêm

Thay đổi biểu tượng liên kết mặc định của mục danh sách
Cách đặt biểu tượng liên kết khác nhau cho mục danh sách (mũi tên phải là mặc định).
Danh sách gấp
Cách tạo danh sách ẩn và hiển thị nội dung.
Định dạng nội dung thêm
Cách tạo lịch.