Nút jQuery Mobile

Các ứng dụng di động được xây dựng dựa trên sự tiện lợi của các thao tác chạm.

Tạo nút trong jQuery Mobile

Các nút trong jQuery Mobile có thể được tạo ra bằng ba phương pháp:

  • Sử dụng yếu tố <button>
  • Sử dụng yếu tố <input>
  • Sử dụng yếu tố <a> với thuộc tính data-role="button"

<button>

<button>按钮</button>

Thử ngay

<input>

<input type="button" value="Nút">

Thử ngay

<a>

<a href="#" data-role="button">Nút</a>

Thử ngay

Lưu ý:Các nút trong jQuery Mobile sẽ tự động nhận được樣式, tăng cường khả năng tương tác và khả năng sử dụng trên thiết bị di động. Chúng tôi khuyến nghị bạn sử dụng thẻ <a> với thuộc tính data-role="button" để tạo liên kết giữa các trang, trong khi các thẻ <input> hoặc <button> được sử dụng cho việc gửi biểu mẫu.

Nút điều hướng

Nếu bạn muốn liên kết trang qua nút, hãy sử dụng thẻ <a> với thuộc tính data-role="button":

Mô hình

<a href="#pagetwo" data-role="button">Chuyển sang trang hai</a>

Thử ngay

Nút trong dòng

Mặc định, nút sẽ chiếm toàn bộ chiều rộng của màn hình. Nếu bạn cần nút điều chỉnh nội dung của mình, hoặc nếu bạn cần hai hoặc nhiều nút hiển thị song song, hãy thêm data-inline="true":

Mô hình

<a href="#pagetwo" data-role="button" data-inline="true">Chuyển sang trang hai</a>

Thử ngay

Nút nhóm

jQuery Mobile cung cấp phương pháp đơn giản để nhóm các nút.

Hãy sử dụng thuộc tính data-role="controlgroup" cùng với data-type="horizontal|vertical" để quy định việc nhóm các nút theo chiều ngang hoặc dọc:

Mô hình

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Nút 1</a>
  <a href="#anylink" data-role="button">Nút 2</a>
  <a href="#anylink" data-role="button">Nút 3</a>
</div>

Thử ngay

Lưu ý:Mặc định, các nút nhóm lại theo chiều dọc, không có lề bên ngoài và khoảng trống. Đồng thời chỉ có nút đầu tiên và nút cuối cùng có góc tròn, tạo ra外观 rất đẹp sau khi nhóm lại.

Nút quay lại

Nếu bạn muốn tạo nút quay lại, hãy sử dụng thuộc tính data-rel="back" (sẽ bỏ qua giá trị href của thẻ锚):

Mô hình

<a href="#" data-role="button" data-rel="back">Quay lại</a>

Thử ngay

Sử dụng nhiều hơn cho thuộc tính data-* của nút

Thuộc tính Giá trị Mô tả Mô hình
data-corners true | false Định nghĩa nút có góc tròn hay không. Kiểm tra
data-mini true | false Định nghĩa có phải là nút nhỏ hay không. Kiểm tra
data-shadow true | false Định nghĩa nút có bóng hay không. Kiểm tra

Để có thông tin đầy đủ về thuộc tính data-* của jQuery Mobile, hãy truy cập trang web của chúng tôi Sách tham khảo Thuộc tính Data jQuery Mobile.

Giải thích cách thêm biểu tượng vào nút.