jQuery Mobile - CSS-Klassen

jQuery CSS-Klassen

Sie können verschiedene Arten von CSS-Klassen verwenden, um die Elemente wie in den folgenden Abschnitten beschrieben zu formatieren.

Globale Klassen

Die folgenden Klassen können als globale Klassen in jQuery Mobile-Widgets verwendet werden:

Sr.Nr. Klasse & Beschreibung
1

ui-corner-all

Es zeigt die Elemente mit abgerundeten Ecken an.

2

ui-shadow

Es zeigt den Schatten für die Elemente an.

3

ui-overlay-shadow

Es zeigt den Überlagerungsschatten für die Elemente an.

4

ui-mini

Es zeigt die kleineren Elemente an.

Tastenklassen

In der folgenden Tabelle sind Schaltflächenklassen aufgeführt, die mit Anker- oder Schaltflächenelementen verwendet werden.

Sr.Nr. Klasse & Beschreibung
1

ui-btn

Es gibt an, dass das Element als Schaltfläche gestaltet wird.

2

ui-btn-inline

Es zeigt die Schaltfläche als Inline-Element, wodurch der für das Etikett erforderliche Platz gespart wird.

3

ui-btn-icon-top

Es platziert das Symbol über dem Text.

4

ui-btn-icon-right

Es platziert das Symbol rechts vom Text.

5

ui-btn-icon-bottom

Es platziert das Symbol unter dem Text.

6

ui-btn-icon-left

Es platziert das Symbol links vom Text.

7

ui-btn-icon-notext

Es zeigt das einzige Symbol.

8

ui-btn-a|b

Es zeigt die Farbe der Schaltfläche an ("a" ist die Standardhintergrundfarbe, dh grau, und "b" ändert die Hintergrundfarbe in schwarz).

Symbolklassen

In der folgenden Tabelle sind Symbolklassen aufgeführt, die mit Anker- oder Schaltflächenelementen verwendet werden.

Sr.Nr. Klasse & Beschreibung
1

ui-icon-action

Es zeigt das Aktionssymbol.

2

ui-icon-alert

Es zeigt das Ausrufezeichen innerhalb eines Dreiecks an.

3

ui-icon-arrow-d-l

Es gibt unten mit dem Pfeil nach links an.

4

ui-icon-arrow-d-r

Es gibt mit dem Rechtspfeil nach unten an.

5

ui-icon-arrow-u-l

Es wird mit dem Pfeil nach links angegeben.

6

ui-icon-arrow-u-r

Es wird mit dem Rechtspfeil angegeben.

7

ui-icon-arrow-l

Es gibt den Pfeil nach links an.

8

ui-icon-arrow-r

Es gibt den Rechtspfeil an.

9

ui-icon-arrow-u

Es gibt den Aufwärtspfeil an.

10

ui-icon-arrow-d

Es gibt den Abwärtspfeil an.

11

ui-icon-bars

Es zeigt die 3 horizontalen Balken übereinander.

12

ui-icon-bullets

Es zeigt die 3 horizontalen Kugeln übereinander.

13

ui-icon-carat-d

Es zeigt das Karat nach unten.

14

ui-icon-carat-l

Es zeigt das Karat links an.

15

ui-icon-carat-r

Es zeigt das Karat rechts an.

16

ui-icon-carat-u

Es zeigt das Karat nach oben an.

17

ui-icon-check

Es zeigt das Häkchensymbol.

18

ui-icon-comment

Es gibt den Kommentar oder die Nachricht an.

19

ui-icon-forbidden

Es zeigt das verbotene Symbol an.

20

ui-icon-forward

Es gibt das Vorwärtssymbol an.

21

ui-icon-navigation

Es gibt das Navigationssymbol an.

22

ui-icon-recycle

Es zeigt das Recycling-Symbol an.

23

ui-icon-refresh

Es zeigt das Aktualisierungssymbol.

24

ui-icon-tag

Es zeigt das Tag-Symbol an.

25

ui-icon-video

Es zeigt das Video- oder Kamerasymbol an.

Themenklassen

Es bietet zwei verschiedene Arten von Themen, z. B. Thema "a" und Thema "b", um das Erscheinungsbild der Anwendung anzupassen. Sie können Ihre eigenen Themenklassen erstellen, indem Sie den Farbfeldbuchstaben (az) anhängen. In der folgenden Tabelle sind Themenklassen aufgeführt, die von Buchstabe a bis z angegeben sind.

Sr.Nr. Klasse & Beschreibung
1

ui-bar-(a-z)

Es zeigt die Farbe für Balken an, einschließlich Kopf- und Fußzeilen und anderer Balken auf der Seite.

2

ui-body-(a-z)

Es zeigt die Farbe für den Inhaltsblock an, einschließlich Listenansicht, Popups, Schieberegler, Bedienfelder, Lader usw.

3

ui-btn-(a-z)

Es zeigt die Farbe für die Schaltfläche an.

4

ui-group-theme-(a-z)

Es zeigt die Farbe für Kontrollgruppen, Listenansichten und reduzierbare Sätze an.

5

ui-overlay-(a-z)

Es zeigt die Hintergrundfarbe für Popup-, Dialog- und Seitencontainer an.

6

ui-page-theme-(a-z)

Es zeigt die Farbe für Seiten an.

Gitterklassen

In der folgenden Tabelle sind Rasterklassen aufgeführt, die mit gleicher Breite, ohne Rand, Hintergrund, Rand oder Abstand verwendet werden.

Sr.Nr. Gitterklasse Säulen Spaltenbreiten Entspricht
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