Classe di jQuery Mobile CSS
classe CSS jQuery
Classe di jQuery Mobile CSS per lo stile elementi diversi.
Il seguente elenco contiene gli stili CSS generali:
classe globale
Le seguenti classi possono usare (pulsanti, barre degli strumenti, pannelli, tavoli, liste, ecc) in jQuery Mobile gadget:
| classe | descrizione |
|---|---|
| ui-angolo-tutto | Aggiunta di un filetto di elemento |
| ui-ombra | Per aggiungere un elemento di ombra |
| ui-overlay-ombra | L'aggiunta di un elemento multistrato ombra |
| ui-mini | Let elementi più piccoli |
classe Button
In aggiunta alla classe globale, è possibile aggiungere la classe seguente (non il pulsante <input>) per <a> o <button> elemento:
| classe | descrizione |
|---|---|
| ui-btn | Aggiungere gli elementi <a> come tasti e display |
| ui-btn-linea | Pulsante Display sulla stessa linea |
| ui-btn-icon-top | icona di destinazione sopra il testo del pulsante |
| ui-btn-icon-destra | icona di destinazione a destra del testo del pulsante |
| ui-btn-icon-bottom | icona di destinazione di seguito il testo del pulsante |
| ui-btn-icon-sinistra | icona di destinazione a sinistra del testo del pulsante |
| ui-btn-icon-notext | Mostra solo icona |
| ui-btn-A | B | Pulsante Designazione demo. "A" è l'impostazione predefinita (testo nero su sfondo grigio stile), "b" per modificare il colore di sfondo nero con testo bianco |
classe icona
Classe di tutte le immagini disponibili utilizzate nella <a> ed elemento <button> (vedere il manuale jQuery Mobile icona di riferimento per imparare a utilizzare su altri elementi):
| 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 | 视频 / 相机 |  |
Categoria di argomento Classi
jQuery Mobile tema fornisce due classi: A (grigio) e B (nero). Tuttavia, è possibile creare le proprie classi personalizzate - per definire la lettera "z" (Vedere temi jQuery Mobile ). La seguente tabella elenca la classe temi disponibili. Lettere (az) significa che è possibile specificare uno stile di z. Per esempio ui-bar-a o ui-bar-b e simili.
| classe | descrizione |
|---|---|
| ui-bar (az) | Specificare la colonna Demo - intestazione, piè di pagina e altre sezioni |
| ui-corpo-(az) | Specifica il colore di pezzi di contenuti - pagina sezione contenuti (versione 1.4.0 obsoleta), visualizzazione elenco, pop, barra laterale, pannello, carico, è crollata. |
| ui-btn- (az) | Specificare un colore pulsante |
| ui-gruppo-tema-(az) | Esso definisce un gruppo di controllo listviews di presentazione e raccolta pieghevole. |
| ui-Modulo elettronico (az) | Definisce i colori di sfondo della pagina, tra le finestre di dialogo, pop-up e altre pagine di livello superiore appaiono nel contenitore |
| ui-page-tema-(az) | Definire pagina di prova |
classe griglia
colonne della griglia sono di uguale larghezza (totale 100%), nessun bordo, sfondo, il margine o padding. Ci sono quattro griglia di layout sono disponibili:
| classe griglia | fila | Larghezza colonna | corrispondenza | Esempi |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | provare |
| ui-grid-a | 2 | 50% / 50% | ui-block-A | B | provare |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-A | B | C | provare |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-A | B | C | D | provare |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-A | B | C | D | e | provare |
Ulteriori informazioni sono disponibili jQuery Mobile griglia sezione.