jQuery Mobile - Lớp CSS
jQuery CSS Classes
Bạn có thể sử dụng các loại lớp CSS khác nhau để tạo kiểu cho các phần tử như được mô tả trong các phần bên dưới.
Lớp học toàn cầu
Các lớp sau có thể được sử dụng làm lớp toàn cục trên các widget jQuery Mobile:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-corner-all Nó hiển thị các phần tử với các góc tròn. |
2 | ui-shadow Nó hiển thị bóng cho các phần tử. |
3 | ui-overlay-shadow Nó hiển thị bóng lớp phủ cho các phần tử. |
4 | ui-mini Nó hiển thị các phần tử nhỏ hơn. |
Các lớp nút
Bảng sau liệt kê các lớp nút được sử dụng với các phần tử neo hoặc nút:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-btn Nó chỉ định rằng phần tử sẽ được tạo kiểu như nút. |
2 | ui-btn-inline Nó hiển thị nút dưới dạng phần tử nội tuyến giúp tiết kiệm không gian cần thiết cho nhãn. |
3 | ui-btn-icon-top Nó đặt biểu tượng phía trên văn bản. |
4 | ui-btn-icon-right Nó đặt biểu tượng bên phải của văn bản. |
5 | ui-btn-icon-bottom Nó đặt biểu tượng bên dưới văn bản. |
6 | ui-btn-icon-left Nó đặt biểu tượng bên trái của văn bản. |
7 | ui-btn-icon-notext Nó hiển thị biểu tượng duy nhất. |
số 8 | ui-btn-a|b Nó hiển thị màu của nút ("a" sẽ là màu nền mặc định tức là màu xám và "b" sẽ thay đổi màu nền thành màu đen). |
Lớp biểu tượng
Bảng sau liệt kê các lớp biểu tượng được sử dụng với các phần tử neo hoặc nút:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-icon-action Nó hiển thị biểu tượng hành động. |
2 | ui-icon-alert Nó hiển thị dấu chấm than bên trong một hình tam giác. |
3 | ui-icon-arrow-d-l Nó chỉ định xuống bằng mũi tên trái. |
4 | ui-icon-arrow-d-r Nó chỉ định xuống bằng mũi tên phải. |
5 | ui-icon-arrow-u-l Nó chỉ định lên bằng mũi tên trái. |
6 | ui-icon-arrow-u-r Nó chỉ định lên bằng mũi tên phải. |
7 | ui-icon-arrow-l Nó chỉ định mũi tên bên trái. |
số 8 | ui-icon-arrow-r Nó chỉ định mũi tên bên phải. |
9 | ui-icon-arrow-u Nó chỉ định mũi tên lên. |
10 | ui-icon-arrow-d Nó chỉ định mũi tên xuống. |
11 | ui-icon-bars Nó hiển thị 3 thanh ngang ở trên thanh kia. |
12 | ui-icon-bullets Nó hiển thị 3 viên đạn nằm ngang phía trên viên đạn kia. |
13 | ui-icon-carat-d Nó hiển thị carat để giảm xuống. |
14 | ui-icon-carat-l Nó hiển thị carat bên trái. |
15 | ui-icon-carat-r Nó hiển thị carat ở bên phải. |
16 | ui-icon-carat-u Nó hiển thị carat lên đến. |
17 | ui-icon-check Nó hiển thị biểu tượng dấu kiểm. |
18 | ui-icon-comment Nó chỉ định bình luận hoặc tin nhắn. |
19 | ui-icon-forbidden Nó hiển thị biểu tượng bị cấm. |
20 | ui-icon-forward Nó chỉ định biểu tượng chuyển tiếp. |
21 | ui-icon-navigation Nó chỉ định biểu tượng điều hướng. |
22 | ui-icon-recycle Nó hiển thị biểu tượng tái chế. |
23 | ui-icon-refresh Nó hiển thị biểu tượng làm mới. |
24 | ui-icon-tag Nó chỉ ra biểu tượng thẻ. |
25 | ui-icon-video Nó cho biết biểu tượng video hoặc máy ảnh. |
Lớp chủ đề
Nó cung cấp hai loại chủ đề khác nhau như chủ đề "a" và chủ đề "b" để tùy chỉnh giao diện của ứng dụng. Bạn có thể tạo các lớp chủ đề của riêng mình bằng cách thêm ký tự mẫu (az). Bảng sau liệt kê các lớp chủ đề được chỉ định từ ký tự a đến z.
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-bar-(a-z) Nó hiển thị màu cho thanh bao gồm đầu trang, chân trang và các thanh khác trong trang. |
2 | ui-body-(a-z) Nó hiển thị màu cho khối nội dung bao gồm danh sách, cửa sổ bật lên, thanh trượt, bảng điều khiển, trình tải, v.v. |
3 | ui-btn-(a-z) Nó hiển thị màu cho nút. |
4 | ui-group-theme-(a-z) Nó hiển thị màu cho nhóm điều khiển, chế độ xem danh sách và tập hợp có thể thu gọn. |
5 | ui-overlay-(a-z) Nó hiển thị màu nền cho hộp chứa cửa sổ bật lên, hộp thoại và trang. |
6 | ui-page-theme-(a-z) Nó hiển thị màu cho các trang. |
Lớp lưới
Bảng sau liệt kê các lớp lưới được sử dụng với chiều rộng bằng nhau, không có đường viền, nền, lề hoặc phần đệm.
Sr.No. | Lớp lưới | Cột | Độ rộng cột | Tương ứng với |
---|---|---|---|---|
1 | ui-lưới-solo | 1 | 100% | ui-block-a |
2 | ui-lưới-a | 2 | 50% / 50% | ui-block-a | b |
3 | ui-lưới-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
4 | ui-lưới-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
5 | ui-lưới-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |