-
jQuery Mobile corso
- jQuery Mobile corso
- jQuery Mobile breve introduzione
- jQuery Mobile installare
- jQuery Mobile pagina
- jQuery Mobile transizione
- jQuery Mobile pulsante
- jQuery Mobile icone dei pulsanti
- jQuery Mobile pop
- jQuery Mobile Barra degli strumenti
- jQuery Mobile barra di navigazione
- jQuery Mobile pannello
- jQuery Mobile blocco pieghevole
- jQuery Mobile tavolo
- jQuery Mobile maglia
jQuery Mobile lista
jQuery Mobile modulo
- jQuery Mobile Costituire la base
- jQuery Mobile forma ingresso
- jQuery Mobile Scegli modulo
- jQuery Mobile cursore Form
jQuery Mobile tema
jQuery Mobile evento
Il miglior tutorial Classe di jQuery Mobile CSS Nel 2024, in questo tutorial puoi imparare classe CSS jQuery,classe globale,classe Button,classe icona,Categoria di argomento Classi,classe griglia,
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.