Biểu tượng nút jQuery Mobile

Bộ biểu tượng do jQuery Mobile cung cấp có thể làm cho nút của bạn trở nên hấp dẫn hơn.

Thêm biểu tượng vào nút jQuery Mobile

Để thêm biểu tượng vào nút của bạn, hãy sử dụng thuộc tính data-icon:

<a href="#anylink" data-role="button" data-icon="search">Tìm kiếm</a>

Lưu ý:Bạn cũng có thể sử dụng thuộc tính data-icon trong các phần tử <button> hoặc <input>.

Dưới đây là một số biểu tượng có sẵn do jQuery Mobile cung cấp:

Giá trị thuộc tính Mô tả Biểu tượng Mô hình
data-icon="arrow-l" Mũi tên trái Kiểm tra
data-icon="arrow-r" Mũi tên phải Kiểm tra
data-icon="delete" Xóa Kiểm tra
data-icon="info" Thông tin Kiểm tra
data-icon="home" Trang chủ Kiểm tra
data-icon="back" Quay lại Kiểm tra
data-icon="search" Tìm kiếm Kiểm tra
data-icon="grid" Lưới Kiểm tra

Để biết thông tin đầy đủ về biểu tượng nút jQuery Mobile, vui lòng truy cập Hướng dẫn biểu tượng jQuery Mobile。

Định vị biểu tượng

Bạn cũng có thể quy định vị trí đặt biểu tượng: trên, phải, dưới hoặc trái.

Bạn có thể sử dụng thuộc tính data-iconpos để quy định vị trí:

Vị trí biểu tượng:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">trên</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">phải</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">dưới</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Trái</a>

Thử ngay

Lưu ý:Mặc định, tất cả các biểu tượng trong các nút được đặt ở bên trái.

Chỉ hiển thị biểu tượng

Nếu chỉ cần hiển thị biểu tượng, hãy đặt data-iconpos thành "notext":

Quay lại:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Tìm kiếm</a>

Thử ngay