jQuery Mobile - Classi CSS
jQuery CSS Classes
È possibile utilizzare diversi tipi di classi CSS per definire gli elementi come descritto nelle sezioni seguenti.
Classi globali
Le seguenti classi possono essere utilizzate come classi globali sui widget jQuery Mobile:
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | ui-corner-all Visualizza gli elementi con angoli arrotondati. |
| 2 | ui-shadow Visualizza l'ombra per gli elementi. |
| 3 | ui-overlay-shadow Visualizza l'ombra di sovrapposizione per gli elementi. |
| 4 | ui-mini Visualizza gli elementi più piccoli. |
Classi di pulsanti
La tabella seguente elenca le classi di pulsanti utilizzate con gli elementi di ancoraggio o pulsante:
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | ui-btn Specifica che l'elemento verrà designato come pulsante. |
| 2 | ui-btn-inline Mostra il pulsante come elemento in linea che salva lo spazio necessario per l'etichetta. |
| 3 | ui-btn-icon-top Posiziona l'icona sopra il testo. |
| 4 | ui-btn-icon-right Posiziona l'icona a destra del testo. |
| 5 | ui-btn-icon-bottom Posiziona l'icona sotto il testo. |
| 6 | ui-btn-icon-left Posiziona l'icona a sinistra del testo. |
| 7 | ui-btn-icon-notext Mostra l'unica icona. |
| 8 | ui-btn-a|b Visualizza il colore del pulsante ("a" sarà il colore di sfondo predefinito, ovvero grigio e "b" cambierà il colore di sfondo in nero). |
Classi di icone
La tabella seguente elenca le classi di icone utilizzate con gli elementi di ancoraggio o pulsante:
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | ui-icon-action Mostra l'icona dell'azione. |
| 2 | ui-icon-alert Visualizza il punto esclamativo all'interno di un triangolo. |
| 3 | ui-icon-arrow-d-l Specifica il basso con la freccia sinistra. |
| 4 | ui-icon-arrow-d-r Specifica in basso con la freccia destra. |
| 5 | ui-icon-arrow-u-l Specifica in alto con la freccia sinistra. |
| 6 | ui-icon-arrow-u-r Specifica in alto con la freccia destra. |
| 7 | ui-icon-arrow-l Specifica la freccia sinistra. |
| 8 | ui-icon-arrow-r Specifica la freccia destra. |
| 9 | ui-icon-arrow-u Specifica la freccia su. |
| 10 | ui-icon-arrow-d Specifica la freccia in basso. |
| 11 | ui-icon-bars Mostra le 3 barre orizzontali una sopra l'altra. |
| 12 | ui-icon-bullets Mostra i 3 proiettili orizzontali uno sopra l'altro. |
| 13 | ui-icon-carat-d Visualizza il carato in giù. |
| 14 | ui-icon-carat-l Visualizza il carato a sinistra. |
| 15 | ui-icon-carat-r Visualizza il carato a destra. |
| 16 | ui-icon-carat-u Visualizza il carato verso l'alto. |
| 17 | ui-icon-check Mostra l'icona del segno di spunta. |
| 18 | ui-icon-comment Specifica il commento o il messaggio. |
| 19 | ui-icon-forbidden Visualizza l'icona proibito. |
| 20 | ui-icon-forward Specifica l'icona avanti. |
| 21 | ui-icon-navigation Specifica l'icona di navigazione. |
| 22 | ui-icon-recycle Visualizza l'icona di riciclaggio. |
| 23 | ui-icon-refresh Mostra l'icona di aggiornamento. |
| 24 | ui-icon-tag Indica l'icona del tag. |
| 25 | ui-icon-video Indica l'icona del video o della fotocamera. |
Classi a tema
Fornisce due diversi tipi di temi come il tema "a" e il tema "b" per personalizzare l'aspetto dell'applicazione. Puoi creare le tue classi di temi aggiungendo la lettera campione (az). La tabella seguente elenca le classi di temi specificate dalla lettera a alla z.
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | ui-bar-(a-z) Visualizza il colore della barra, inclusi intestazioni, piè di pagina e altre barre nella pagina. |
| 2 | ui-body-(a-z) Visualizza il colore per il blocco di contenuto inclusi listview, popup, cursori, pannelli, caricatori, ecc. |
| 3 | ui-btn-(a-z) Visualizza il colore del pulsante. |
| 4 | ui-group-theme-(a-z) Visualizza il colore per i gruppi di controllo, le visualizzazioni elenco e i set comprimibili. |
| 5 | ui-overlay-(a-z) Visualizza il colore di sfondo per popup, finestre di dialogo e contenitori di pagine. |
| 6 | ui-page-theme-(a-z) Visualizza il colore per le pagine. |
Classi di griglia
La tabella seguente elenca le classi di griglia che vengono utilizzate con la stessa larghezza, senza bordo, sfondo, margine o riempimento.
| Sr.No. | Classe di griglia | Colonne | Larghezze delle colonne | Corrisponde a |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |