Klassen jQuery CSS
jQuery Mobile verwenden CSS-Klassen verschiedene Elemente, um Stil.
Für die Referenzliste unten haben wir CSS-Klassen für gemeinsame Stile enthalten.
globale Klassen
Diese Klassen können auf beliebigen jQuery Mobile Widgets (hinzugefügt werden buttons, toolbars, panels, tables, lists , etc ..):
| Klasse | Beschreibung |
|---|---|
| ui-corner-all | Fügt abgerundete Ecken an dem Element |
| ui-shadow | Fügt Schatten auf das Element |
| ui-overlay-shadow | Fügt ein Overlay Schatten auf das Element |
| ui-mini | Macht das Element kleiner |
Button-Klassen
Zusätzlich zu den globalen Klassen können Sie die folgenden Klassen in den <a> oder <button> Elemente (nicht <input> Tasten):
| Klasse | Beschreibung |
|---|---|
| ui-btn | Muss hinzugefügt werden , um <a> Elemente , wenn Sie wollen , wie Tasten gestylt werden |
| ui-btn-inline | Zeigt die Schaltfläche Inline |
| ui-btn-icon-top | Positioniert das Symbol über der Taste Text |
| ui-btn-icon-right | Positioniert das Symbol auf der rechten Seite der Button-Text |
| ui-btn-icon-bottom | Positioniert das Symbol unterhalb der Schaltfläche Text |
| ui-btn-icon-left | Positioniert das Symbol links neben der Schaltfläche Text |
| ui-btn-icon-notext | Zeigt nur das Symbol |
| ui-btn-a|b | Gibt die Farbe der Schaltfläche. "a" Standard (grauer Hintergrund mit schwarzem Text), während "b" wird die Farbe auf einem schwarzen Hintergrund mit weißer Schrift ändern |
Icon-Klassen
Alle verfügbaren Symbol Klassen für <a> und <button> Elemente (siehe Icons Referenz dafür , wie Symbole auf andere Elemente zu verwenden):
| Klasse | Symbol Beschreibung | Symbol |
|---|---|---|
| ui-icon-action | Aktion (Pfeil Lichtbogen im Uhrzeigersinn aus einer Box) | |
| ui-icon-alert | Ausrufezeichen in einem Dreieck | |
| ui-icon-audio | Sound / Lautsprecher | |
| ui-icon-arrow-d-l | Unten, Pfeil nach links | |
| ui-icon-arrow-d-r | Unten, Pfeil nach rechts | |
| ui-icon-arrow-u-l | Nach oben, Pfeil nach links | |
| ui-icon-arrow-u-r | Nach oben, Pfeil nach rechts | |
| ui-icon-arrow-l | Linker Pfeil | |
| ui-icon-arrow-r | Rechter Pfeil | |
| ui-icon-arrow-u | Aufwärtspfeil | |
| ui-icon-arrow-d | Pfeil nach unten | |
| ui-icon-back | Zurück (gebogener Pfeil gegen den Uhrzeigersinn nach oben Lichtbogen) | |
| ui-icon-bars | Drei horizontale Balken übereinander | |
| ui-icon-bullets | Drei horizontale Kugeln übereinander | |
| ui-icon-calendar | Kalender | |
| ui-icon-camera | Kamera | |
| ui-icon-carat-d | Down-Karat | |
| ui-icon-carat-l | links Karat | |
| ui-icon-carat-r | Rechts Karat | |
| ui-icon-carat-u | Bis Karat | |
| ui-icon-check | Häkchen | |
| ui-icon-clock | Uhr | |
| ui-icon-cloud | Wolke | |
| ui-icon-comment | Kommentar / Nachricht | |
| ui-icon-delete | Löschen | |
| ui-icon-edit | Bearbeiten / Bleistift | |
| ui-icon-eye | Auge | |
| ui-icon-forbidden | Verbotene Zeichen | |
| ui-icon-forward | Forward - (gebogener Pfeil Lichtbogen im Uhrzeigersinn nach oben) | |
| ui-icon-gear | Gang | |
| ui-icon-grid | Gitter | |
| ui-icon-heart | Herz / Love Symbol | |
| ui-icon-home | Home / Haus | |
| ui-icon-info | Information | |
| ui-icon-location | Ort | |
| ui-icon-lock | Sperren / Padlock | |
| ui-icon-mail | Post / Brief | |
| ui-icon-minus | Minuszeichen | |
| ui-icon-navigation | Navigation | |
| ui-icon-phone | Telefon | |
| ui-icon-power | Einschalten / Ausschalten) | |
| ui-icon-plus | Pluszeichen | |
| ui-icon-recycle | Recycling-Zeichen | |
| ui-icon-refresh | Refresh - Kreispfeil | |
| ui-icon-search | Suchen / Lupe | |
| ui-icon-shop | Shop / Bag | |
| ui-icon-star | Star | |
| ui-icon-tag | Etikett | |
| ui-icon-user | User / A Person | |
| ui-icon-video | Videokamera |
Themenklassen
jQuery Mobile bietet zwei Themenklassen: a (grau) und b (schwarz). Sie können aber auch eigene, benutzerdefinierte Klasse Werte schaffen - den ganzen Weg bis zum Buchstaben "z" (Siehe die Themen Kapitel). Die folgende Tabelle listet die verfügbaren Themenklassen. Die Buchstaben (az) bedeutet , dass Sie einen Brief von a bis z angeben können. Zum Beispiel: ui-bar-a oder ui-bar-b , usw.
| Klasse | Beschreibung |
|---|---|
| ui-bar-(a-z) | Gibt die Farbe für eine Bar - Kopf- und Fußzeilen und anderen Bars |
| ui-body-(a-z) | Gibt die Farbe für einen Inhaltsblock - Seiteninhalt Scheiben (veraltet in Version 1.4.0), Listenansicht Artikel, Popups, Collapsibles, Lader, Schieber und Platten |
| ui-btn-(a-z) | Gibt die Farbe für eine Schaltfläche (und Symbol) |
| ui-group-theme-(a-z) | Gibt die Farbe für controlgroups, Listviews und zusammenklappbar Sätze |
| ui-overlay-(a-z) | Gibt die Hintergrundfarbe der Seite, die der Dialog, Popup und andere Seiten Container über erscheint der |
| ui-page-theme-(a-z) | Gibt die Farbe für Seiten |
Grid-Klassen
Spalten in einem Raster von gleicher Breite (und 100% breit insgesamt), ohne Rahmen, Hintergrund, Rand oder Polsterung. Es gibt fünf Layout-Raster, die verwendet werden können:
| Grid-Klasse | Spalten | Spaltenbreite | Entspricht | Beispiel |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Weitere Informationen über die Gitter, lesen Sie unsere jQuery Mobile Grids Kapitel .