Das beste jQuery Mobile CSS-Klasse-Tutorial im Jahr 2024. In diesem Tutorial können Sie jQuery CSS-Klasse,global Class,Button-Klasse,Icon-Klasse,Topic Kategorie Klassen,Grid-Klasse, lernen
jQuery Mobile CSS-Klasse verschiedene Elemente zu stylen.
Die folgende Liste enthält die allgemeinen CSS-Stile:
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 |
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 |
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 | 视频 / 相机 |
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-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.