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