jQuery Mobile CSS-Klasse
jQuery CSS-Klasse
jQuery Mobile CSS-Klasse verschiedene Elemente zu stylen.
Die folgende Liste enthält die allgemeinen CSS-Stile:
global Class
Die folgenden Klassen verwenden können (Schaltflächen, Symbolleisten, Tafeln, Tabellen, Listen, etc.) in jQuery Mobile-Gadget:
| Klasse | Beschreibung |
|---|---|
| ui-Ecke-all | Hinzufügen eines Elements Filet |
| ui-Schatten | Um einen Schatten Element hinzufügen |
| ui-Overlay-Schatten | Hinzufügen eines Element-Multi-Layer-Schatten |
| ui-mini | Lassen Sie kleinere Elemente |
Button-Klasse
Neben der globalen Klasse, können Sie die folgende Klasse hinzufügen (nicht die <input> Taste) auf <a> oder <button> Element:
| Klasse | Beschreibung |
|---|---|
| ui-btn | Fügen Sie die <a> Elemente wie Tasten und Display |
| ui-btn-inline | Display-Taste auf der gleichen Linie |
| ui-btn-icon-top | Zielsymbol über die Schaltfläche Text |
| ui-btn-icon-Recht | Zielsymbol rechts von der Schaltfläche Text |
| ui-btn-icon-bottom | Zielsymbol unter dem Button-Text |
| ui-btn-icon-links | Zielsymbol links neben der Schaltfläche Text |
| ui-btn-icon-notext | Nur Symbol |
| ui-btn-a | b | Bezeichnung Schaltfläche Demo. "A" ist die Standardeinstellung (schwarzer Text auf einem grauen Hintergrund-Stil), "b", um die Farbe eines schwarzen Hintergrund mit weißer Schrift ändern |
Icon-Klasse
Klasse aller verfügbaren Bilder in <a> verwendet und <button> Element (Siehe Handbuch jQuery Mobile Symbol Bezug zu lernen , wie man auf andere Elemente zu verwenden):
| Class | 图标描述 | 图标 |
|---|---|---|
| ui-icon-action | 动作 (一般用于页面跳转切换) |  |
| ui-icon-alert | 三角形内的感叹号 |  |
| ui-icon-audio | 音响/音箱 |  |
| ui-icon-arrow-d-l | 左下角箭头 |  |
| ui-icon-arrow-d-r | 右下角箭头 |  |
| ui-icon-arrow-u-l | 左上角箭头 |  |
| ui-icon-arrow-u-r | 右上角箭头 |  |
| ui-icon-arrow-l | 左角箭头 |  |
| ui-icon-arrow-r | 右角箭头 |  |
| ui-icon-arrow-u | 向上箭头 |  |
| ui-icon-arrow-d | 向下箭头 |  |
| ui-icon-back | 返回 |  |
| ui-icon-bars | 三条水平线，一般用于展示列表按钮图标 |  |
| ui-icon-bullets | 用于展示列表按钮图标 |  |
| ui-icon-calendar | 日历 |  |
| ui-icon-camera | 相机 |  |
| ui-icon-carat-d | 向下滑动图标 |  |
| ui-icon-carat-l | 向左滑动图标 |  |
| ui-icon-carat-r | 向右滑动图标 |  |
| ui-icon-carat-u | 向上滑动图标 |  |
| ui-icon-check | 勾选 |  |
| ui-icon-clock | 闹钟 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 评论 / 消息 |  |
| ui-icon-delete | 删除 |  |
| ui-icon-edit | 编辑 / 铅笔 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁用标识 sign |  |
| ui-icon-forward | 撤销 - (返回上一步) |  |
| ui-icon-gear | 齿轮，一般用于设置按钮图标 |  |
| ui-icon-grid | 网格 |  |
| ui-icon-heart | 心型，可用于文章收藏 |  |
| ui-icon-home | 主页 |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 锁 |  |
| ui-icon-mail | 邮件 / 信封 |  |
| ui-icon-minus | 减号 |  |
| ui-icon-navigation | 导航 |  |
| ui-icon-phone | 电话 |  |
| ui-icon-power | 开关 (On/off) |  |
| ui-icon-plus | 加号 |  |
| ui-icon-recycle | 循环 标识 |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大镜 |  |
| ui-icon-shop | 商店/购物袋 |  |
| ui-icon-star | 星号 |  |
| ui-icon-tag | 标签 |  |
| ui-icon-user | 用户 / 人物 |  |
| ui-icon-video | 视频 / 相机 |  |
Topic Kategorie Klassen
jQuery Mobile Thema bietet zwei Klassen: a (grau) und b (schwarz). Allerdings können Sie Ihre eigenen benutzerdefinierten Klassen erstellen - den Buchstaben "z" zu definieren (siehe jQuery Mobile Themen ). Die folgende Tabelle listet die verfügbaren Themen-Klasse. Letters (az) bedeutet, dass Sie einen Stil z angeben können. Zum Beispiel ui-bar-a oder ui-bar-b und dergleichen.
| Klasse | Beschreibung |
|---|---|
| ui-bar- (az) | Geben Sie die Spalte Demo - Header, Footer und andere Abschnitte |
| ui-Body- (az) | Gibt die Farbe der Teile des Inhalts - Inhalt Abschnitt Seite (Version 1.4.0 veraltet), Listenansicht, pop, Seitenleiste, Panel, Last, brach zusammen. |
| ui-btn- (az) | Geben Sie eine Schaltfläche Farbe |
| ui-group-Themen- (az) | Es definiert eine Kontrollgruppe Präsentation Listviews und zusammenklappbar Sammlung. |
| ui-Overlay- (az) | Definiert die Seite Hintergrundfarben, einschließlich Dialogfelder, Pop-ups und andere Top-Level-Seiten in dem Behältnis |
| ui-Seite-Themen- (az) | Definieren Seite Demo |
Grid-Klasse
Grid-Säulen sind von gleicher Breite (gesamt 100%), ohne Rahmen, Hintergrund, Rand oder Polsterung. Es gibt vier Layout-Raster stehen zur Verfügung:
| Grid-Klasse | Reihe | Spaltenbreite | Korrespondenz | Beispiele |
|---|---|---|---|---|
| ui-Grid-Solo | 1 | 100% | ui-Block-a | versuchen |
| ui-Grid-a | 2 | 50% / 50% | ui-block-a | b | versuchen |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c | versuchen |
| ui-Grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d | versuchen |
| ui-Grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e | versuchen |
Weitere Informationen finden Sie jQuery Mobile Grid - Seite.