jQuery Mobile - Klasy CSS

Klasy CSS jQuery

Możesz użyć różnych typów klas CSS do stylizacji elementów, jak opisano w poniższych sekcjach.

Klasy globalne

Następujące klasy mogą być używane jako klasy globalne w widżetach jQuery Mobile -

Sr.No.	Klasa i opis
1	ui-corner-all Wyświetla elementy z zaokrąglonymi narożnikami.
2	ui-shadow Wyświetla cień elementów.
3	ui-overlay-shadow Wyświetla cień nakładki dla elementów.
4	ui-mini Wyświetla mniejsze elementy.

Klasy przycisków

W poniższej tabeli wymieniono klasy przycisków, które są używane z elementami zakotwiczenia lub przycisku -

Sr.No.	Klasa i opis
1	ui-btn Określa, że element będzie stylizowany na przycisk.
2	ui-btn-inline Pokazuje przycisk jako element wbudowany, co pozwala zaoszczędzić miejsce na etykietę.
3	ui-btn-icon-top Umieszcza ikonę nad tekstem.
4	ui-btn-icon-right Umieszcza ikonę po prawej stronie tekstu.
5	ui-btn-icon-bottom Umieszcza ikonę pod tekstem.
6	ui-btn-icon-left Umieszcza ikonę po lewej stronie tekstu.
7	ui-btn-icon-notext Pokazuje jedyną ikonę.
8	ui-btn-a\|b Wyświetla kolor przycisku („a” będzie domyślnym kolorem tła, tj. Szary, a „b” zmieni kolor tła na czarny).

Klasy ikon

W poniższej tabeli wymieniono klasy ikon, które są używane z elementami zakotwiczenia lub przycisku -

Sr.No.	Klasa i opis
1	ui-icon-action Pokazuje ikonę akcji.
2	ui-icon-alert Wyświetla wykrzyknik wewnątrz trójkąta.
3	ui-icon-arrow-d-l Określa dół za pomocą strzałki w lewo.
4	ui-icon-arrow-d-r Określa dół za pomocą prawej strzałki.
5	ui-icon-arrow-u-l Określa się za pomocą strzałki w lewo.
6	ui-icon-arrow-u-r Określa się za pomocą prawej strzałki.
7	ui-icon-arrow-l Określa lewą strzałkę.
8	ui-icon-arrow-r Określa strzałkę w prawo.
9	ui-icon-arrow-u Określa strzałkę w górę.
10	ui-icon-arrow-d Określa strzałkę w dół.
11	ui-icon-bars Pokazuje 3 poziome paski jeden nad drugim.
12	ui-icon-bullets Pokazuje 3 poziome pociski jeden nad drugim.
13	ui-icon-carat-d Wyświetla karat do dołu.
14	ui-icon-carat-l Wyświetla karat po lewej stronie.
15	ui-icon-carat-r Wyświetla karat po prawej stronie.
16	ui-icon-carat-u Wyświetla karat do góry.
17	ui-icon-check Pokazuje ikonę znacznika wyboru.
18	ui-icon-comment Określa komentarz lub wiadomość.
19	ui-icon-forbidden Wyświetla zabronioną ikonę.
20	ui-icon-forward Określa ikonę do przodu.
21	ui-icon-navigation Określa ikonę nawigacji.
22	ui-icon-recycle Wyświetla ikonę recyklingu.
23	ui-icon-refresh Pokazuje ikonę odświeżania.
24	ui-icon-tag Wskazuje ikonę tagu.
25	ui-icon-video Wskazuje ikonę wideo lub aparatu.

Zajęcia tematyczne

Udostępnia dwa różne typy motywów, takie jak motyw „a” i motyw „b”, aby dostosować wygląd aplikacji. Możesz tworzyć własne klasy motywów, dołączając literę próbki (az). Poniższa tabela zawiera listę klas motywów, które są określone od litery a do z.

Sr.No.	Klasa i opis
1	ui-bar-(a-z) Wyświetla kolor paska, w tym nagłówków, stopek i innych pasków na stronie.
2	ui-body-(a-z) Wyświetla kolor bloku treści, w tym widoku listy, wyskakujących okienek, suwaków, paneli, programów ładujących itp.
3	ui-btn-(a-z) Wyświetla kolor przycisku.
4	ui-group-theme-(a-z) Wyświetla kolor grup kontrolnych, widoków list i zestawów zwijanych.
5	ui-overlay-(a-z) Wyświetla kolor tła dla kontenerów wyskakujących okienek, okien dialogowych i stron.
6	ui-page-theme-(a-z) Wyświetla kolor stron.

Klasy siatki

W poniższej tabeli wymieniono klasy siatki, które są używane z równą szerokością, bez obramowania, tła, marginesu lub wypełnienia.

Sr.No.	Klasa siatki	Kolumny	Szerokość kolumn	Koresponduje z
1	ui-grid-solo	1	100%	ui-block-a
2	ui-grid-a	2	50% / 50%	ui-block-a \| b
3	ui-grid-b	3	33% / 33% / 33%	ui-block-a \| b \| c
4	ui-grid-c	4	25% / 25% / 25% / 25%	ui-block-a \| b \| c \| d
5	ui-grid-d	5	20% / 20% / 20% / 20% / 20%	ui-block-a \| b \| c \| d \| e