Le classi CSS jQuery
jQuery Mobile utilizzare le classi CSS per lo stile elementi diversi.
Per l'elenco di riferimento di seguito, abbiamo incluso le classi CSS per gli stili comuni.
Classi globali
Queste classi possono essere aggiunti su tutti i widget jQuery Mobile ( buttons, toolbars, panels, tables, lists , ecc ..):
| Classe | Descrizione |
|---|---|
| ui-corner-all | Aggiunge angoli arrotondati all'elemento |
| ui-shadow | Aggiunge ombra all'elemento |
| ui-overlay-shadow | Aggiunge un'ombra sovrapposizione all'elemento |
| ui-mini | Rende l'elemento più piccolo |
Classi Button
Oltre ai corsi di livello mondiale, è possibile aggiungere le seguenti classi di <a> o <button> elementi (non <input> pulsanti):
| Classe | Descrizione |
|---|---|
| ui-btn | Deve essere aggiunto al <a> elementi se si desidera loro di essere in stile come pulsanti |
| ui-btn-inline | Consente di visualizzare il pulsante in linea |
| ui-btn-icon-top | Posiziona l'icona sopra il testo del pulsante |
| ui-btn-icon-right | Posiziona l'icona a destra del testo del pulsante |
| ui-btn-icon-bottom | Posiziona l'icona sotto il testo del pulsante |
| ui-btn-icon-left | Posiziona l'icona a sinistra del testo del pulsante |
| ui-btn-icon-notext | Consente di visualizzare solo l'icona |
| ui-btn-a|b | Specifica il colore del pulsante. "a" è di default (sfondo grigio con testo nero), mentre "b" cambierà il colore di uno sfondo nero con testo bianco |
Classi icona
Tutte le classi di icone disponibili per <a> e <button> elementi (vedi riferimento Icone per come utilizzare le icone su altri elementi):
| Classe | icona Descrizione | Icona |
|---|---|---|
| ui-icon-action | Azione (freccia in senso orario arco di una scatola) | |
| ui-icon-alert | Punto esclamativo all'interno di un triangolo | |
| ui-icon-audio | Audio / altoparlanti | |
| ui-icon-arrow-d-l | Giù, freccia sinistra | |
| ui-icon-arrow-d-r | Giù, freccia destra | |
| ui-icon-arrow-u-l | Up, freccia sinistra | |
| ui-icon-arrow-u-r | Up, freccia destra | |
| ui-icon-arrow-l | Freccia sinistra | |
| ui-icon-arrow-r | Freccia destra | |
| ui-icon-arrow-u | freccia su | |
| ui-icon-arrow-d | Freccia in giù | |
| ui-icon-back | Indietro (freccia curva arco in senso antiorario verso l'alto) | |
| ui-icon-bars | Tre barre orizzontali oltre a vicenda | |
| ui-icon-bullets | Tre proiettili orizzontali oltre a vicenda | |
| ui-icon-calendar | Calendario | |
| ui-icon-camera | macchina fotografica | |
| ui-icon-carat-d | carati di Down | |
| ui-icon-carat-l | carati sinistra | |
| ui-icon-carat-r | carati destro | |
| ui-icon-carat-u | fino carati | |
| ui-icon-check | Segno di spunta | |
| ui-icon-clock | Orologio | |
| ui-icon-cloud | Nube | |
| ui-icon-comment | Commento / Messaggio | |
| ui-icon-delete | cancellare | |
| ui-icon-edit | Modifica / Pencil | |
| ui-icon-eye | Occhio | |
| ui-icon-forbidden | segno severo | |
| ui-icon-forward | A termine - (freccia curva d'arco in senso orario verso l'alto) | |
| ui-icon-gear | Ingranaggio | |
| ui-icon-grid | Griglia | |
| ui-icon-heart | Cuore / Simbolo di amore | |
| ui-icon-home | Casa casa | |
| ui-icon-info | Informazioni | |
| ui-icon-location | luogo | |
| ui-icon-lock | Blocco / lucchetto | |
| ui-icon-mail | Posta / Lettera | |
| ui-icon-minus | segno meno | |
| ui-icon-navigation | Navigazione | |
| ui-icon-phone | Telefono | |
| ui-icon-power | Potenza (on / off) | |
| ui-icon-plus | Segno più | |
| ui-icon-recycle | Ricicli il segno | |
| ui-icon-refresh | Refresh - freccia circolare | |
| ui-icon-search | Ricerca / Lente d'ingrandimento | |
| ui-icon-shop | Negozio / Bag | |
| ui-icon-star | Stella | |
| ui-icon-tag | Etichetta | |
| ui-icon-user | Utente / Una persona | |
| ui-icon-video | Videocamera |
Classi a tema
jQuery Mobile fornisce due classi tema: A (grigio) e B (nero). Tuttavia, è anche possibile creare i valori di classe proprio, personalizzati - tutta la strada fino alla lettera "z" (Vedere il capitolo Themes). La tabella elenca le classi a tema disponibili. Le lettere (az) significa che è possibile specificare una lettera dalla a alla z. Per esempio: ui-bar-a o ui-bar-b , etc.
| Classe | Descrizione |
|---|---|
| ui-bar-(a-z) | Specifica il colore per un bar - intestazioni, piè di pagina e altri bar |
| ui-body-(a-z) | Specifica il colore per un contenuto blocca - pagina riquadri contenuti (deprecato nella versione 1.4.0), articoli ListView, popup, collapsibles, caricatore, cursori e pannelli |
| ui-btn-(a-z) | Specifica il colore per un pulsante (e l'icona) |
| ui-group-theme-(a-z) | Specifica il colore per controlgroups, listviews e set pieghevoli |
| ui-overlay-(a-z) | Specifica il colore della pagina che la finestra di dialogo, appare popup e altri contenitori di pagina in cima a fondo |
| ui-page-theme-(a-z) | Specifica il colore per le pagine |
Classi griglia
Colonne in una griglia sono di uguale larghezza (e il 100% di larghezza in totale), senza bordo, sfondo, il margine o padding. Ci sono cinque griglie di layout che possono essere utilizzati:
| Griglia di Classe | colonne | la larghezza delle colonne | Corrisponde a | Esempio |
|---|---|---|---|---|
| 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 |
Per ulteriori informazioni su griglie, leggere la nostra jQuery Mobile Griglie capitolo .