Thanh định hướng jQuery Mobile

Thanh định hướng jQuery Mobile

Thanh điều hướng được cấu thành từ một nhóm liên kết được sắp xếp ngang, thường nằm trong tiêu đề hoặc chân trang.

Mặc định, các liên kết trong thanh điều hướng sẽ tự động chuyển đổi thành nút (không cần data-role="button").

Hãy sử dụng thuộc tính data-role="navbar" để định nghĩa thanh điều hướng:

thực thể

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Trang chủ</a></li>
      <li><a href="#anylink">Trang hai</a></li>
      <li><a href="#anylink">Tìm kiếm</a></li>
    </ul>
  </div>
</div>

Thử ngay

Lưu ý:Chiều rộng của nút, mặc định, sẽ bằng với nội dung của nó. Sử dụng danh sách không có dấu để phân chia đều các nút: một nút chiếm 100% chiều rộng, hai nút chia sẻ 50% chiều rộng, ba nút 33.3%, và cứ thế. Tuy nhiên, nếu bạn quy định năm nút trở lên trong thanh điều hướng, nó sẽ gấp lại thành nhiều hàng (tham khảo "thực thể thêm" ở cuối trang).

Nút hoạt động

Khi liên kết trong thanh điều hướng bị nhấn, nó sẽ nhận được giao diện được chọn (được nhấn).

Nếu muốn thực hiện giao diện này mà không nhấn vào liên kết, hãy sử dụng lớp "ui-btn-active":

thực thể

<li><a href="#anylink" class="ui-btn-active">Trang chủ</a></li>

Thử ngay

Đối với nhiều trang, bạn có thể cần thiết lập giao diện "được chọn" cho mỗi nút để biểu thị rằng người dùng đang duyệt trang đó. Nếu muốn làm như vậy, hãy thêm lớp "ui-state-persist" và lớp "ui-btn-active" vào liên kết:

thực thể

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Trang chủ</a></li>

Thử ngay

Các ví dụ khác

Thanh định hướng trong nội dung
Cách thêm thanh định hướng vào data-role="content".
Thanh định hướng trong chân trang
Cách thêm thanh định hướng vào chân trang.
Định vị biểu tượng trong thanh định hướng
Cách đặt biểu tượng trong thanh định hướng bên trong chân trang.
Nhiều hơn năm nút
Hiển thị mười nút trong thanh định hướng.