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 |