Thanh công cụ jQuery Mobile

Thanh công cụ jQuery Mobile

Các yếu tố thanh công cụ thường được đặt trong tiêu đề trang và chân trang để thực hiện điều hướng "đã truy cập":

Cột tiêu đề

Tiêu đề trang thường chứa tiêu đề trang/LOGO hoặc một đến hai nút (thường là trang chủ, tùy chọn hoặc nút tìm kiếm).

Bạn có thể thêm nút vào bên trái hoặc/hoặc bên phải tiêu đề trang.

Mã dưới đây sẽ thêm một nút vào bên trái văn bản tiêu đề tiêu đề trang và một nút vào bên phải:

Mô hình

<div data-role="header">
  <a href="#" data-role="button">Trang chủ</a>
  <h1>Chào mừng bạn đến với trang chủ của tôi</h1>
  <a href="#" data-role="button">Tìm kiếm</a>
</div>

Thử trực tiếp

Mã dưới đây sẽ thêm một nút vào bên trái tiêu đề tiêu đề trang:

<div data-role="header">
  <a href="#" data-role="button">Trang chủ</a>
  <h1>Chào mừng bạn đến với trang chủ của tôi</h1>
</div>

Nhưng, nếu bạn đặt liên kết nút sau phần tử <h1>, nó sẽ không hiển thị ở bên phải văn bản. Để thêm nút vào bên phải tiêu đề tiêu đề trang, hãy quy định tên lớp "ui-btn-right":

Mô hình

<div data-role="header">
  <h1>Chào mừng bạn đến với trang chủ của tôi</h1>
  <a href="#" data-role="button" class="ui-btn-right">Tìm kiếm</a>
</div>

Thử trực tiếp

Lưu ý:Tiêu đề trang có thể chứa một hoặc hai nút, nhưng chân trang không có giới hạn.

Cột chân trang

So với tiêu đề trang, chân trang có tính co giãn cao hơn - chúng rất实用且多变，do đó có thể chứa số lượng nút cần thiết:

Mô hình

<div data-role="footer">
  <a href="#" data-role="button">Chuyển phát đến微博新浪</a>
  <a href="#" data-role="button">Chuyển phát đến微博腾讯</a>
  <a href="#" data-role="button">Chuyển phát đến không gian QQ</a>
</div>

Thử trực tiếp

Ghi chú:Kiểu dáng của chân trang và tiêu đề khác nhau (nó sẽ giảm đi một số lề nội bộ và khoảng trống, và các nút sẽ không được đặt giữa). Nếu muốn sửa vấn đề này, hãy đặt tên lớp "ui-btn" trong chân trang:

Mô hình

<div data-role="footer" class="ui-btn">

Thử trực tiếp

Bạn cũng có thể chọn việc sắp xếp các nút ngang hoặc dọc trong chân trang:

Mô hình

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Chuyển phát đến微博新浪</a>
    <a href="#" data-role="button" data-icon="plus">Chuyển phát đến微博腾讯</a>
    <a href="#" data-role="button" data-icon="plus">Chuyển phát đến không gian QQ</a>
  </div>
</div>

Thử trực tiếp

Định vị tiêu đề và chân trang

Có ba cách để đặt tiêu đề và chân trang:

  • Inline - Mặc định. Tiêu đề và chân trang nằm trong nội dung trang.
  • Fixed - Tiêu đề và chân trang sẽ ở trên cùng và dưới cùng của trang.
  • Toàn màn hình - Tương tự fixed; tiêu đề và chân trang sẽ ở trên cùng và dưới cùng của trang, nhưng cũng nằm trên nội dung trang. Nó cũng trong suốt một chút

Hãy sử dụng thuộc tính data-position để định vị tiêu đề và chân trang:

Định vị-inline (mặc định)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Thử trực tiếp

Định vị cố định

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Thử trực tiếp

Nếu cần kích hoạt định vị toàn màn hình, hãy sử dụng data-position="fixed" và thêm thuộc tính data-fullscreen vào phần tử đó:

Toàn màn hình định vị

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Thử trực tiếp

Lưu ý:Fullscreen rất lý tưởng cho ảnh, hình ảnh và video.

Lưu ý:Đối với vị trí fixed và fullscreen, chạm màn hình sẽ ẩn và hiển thị tiêu đề và chân trang.