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