Co gập jQuery Mobile

Nội dung khối cuộn lại

Cuộn lại (Collapsibles) cho phép bạn ẩn hoặc hiển thị nội dung - rất hữu ích cho việc lưu trữ một phần thông tin.

Nếu bạn muốn tạo khối nội dung cuộn lại, hãy gán thuộc tính data-role="collapsible" cho một thùng chứa. Trong thùng chứa (div), thêm một phần tử tiêu đề (h1-h6), sau đó là bất kỳ thẻ HTML nào bạn muốn mở rộng:

Mô hình

<div data-role="collapsible">
  <h1>Nhấn vào tôi - Tôi có thể gấp lại!</h1>
  <p>Tôi là nội dung cuộn lại.</p>
</div>

Thử trực tiếp

Mặc định, nội dung này là đóng lại. Nếu bạn muốn mở rộng nội dung khi trang được tải, hãy sử dụng data-collapsed="false":

Mô hình

<div data-role="collapsible" data-collapsed="false">
  <h1>Nhấn vào tôi - Tôi có thể gấp lại!</h1>
  <p>Bây giờ tôi mặc định là mở rộng.</p>
</div>

Thử trực tiếp

Khối cuộn lại nhúng

Có thể nhúng nội dung khối cuộn lại:

Mô hình

<div data-role="collapsible">
  <h1>Nhấn vào tôi - Tôi có thể gấp lại!</h1>
  <p>Tôi là nội dung được mở rộng.</p>
  <div data-role="collapsible">
    <h1>Nhấn vào tôi - Tôi là khối cuộn lại nhúng!</h1>
    <p>Tôi là nội dung được mở rộng trong khối cuộn lại nhúng.</p>
  </div>
</div>

Thử trực tiếp

Lưu ý:Nội dung khối cuộn lại có thể được nhúng vào bất kỳ số lần nào bạn muốn.

Hợp tập hợp cuộn lại

Hợp tập hợp cuộn lại (Collapsible sets) là các khối cuộn lại được kết hợp lại (thường được gọi là nắm cuộn). Khi khối mới được mở, tất cả các khối khác sẽ đóng lại.

Tạo một số khối nội dung, sau đó đóng gói khối cuộn lại bằng cách sử dụng data-role="collapsible-set":

Mô hình

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Nhấn vào tôi - Tôi có thể gấp lại!</h1>
    <p>Tôi là nội dung được mở rộng.</p>
  </div>
  <div data-role="collapsible">
    <h1>Nhấn vào tôi - Tôi có thể gấp lại!</h1>
    <p>Tôi là nội dung được mở rộng.</p>
  </div>
</div>

Thử trực tiếp

Các ví dụ khác

Loại bỏ góc tròn bằng thuộc tính data-inset
Cách loại bỏ góc tròn trên collapsibles.
Thay đổi collapsibles bằng data-mini
Cách làm cho collapsibles nhỏ gọn hơn.
Thay đổi biểu tượng bằng data-collapsed-icon và data-expanded-icon
Cách thay đổi biểu tượng của collapsibles (mặc định là + và -).