jQuery clase CSS
jQuery Mobile folosesc clase CSS pentru elementele de stil diferite.
Pentru lista de referință de mai jos, am inclus clase CSS pentru stiluri comune.
Clase globale
Aceste clase pot fi adăugate pe orice widget - uri jQuery Mobile ( buttons, toolbars, panels, tables, lists de buttons, toolbars, panels, tables, lists , etc ..):
| Clasă | Descriere |
|---|---|
| ui-corner-all | Adaugă colțuri rotunjite la elementul |
| ui-shadow | Adaugă umbră la elementul |
| ui-overlay-shadow | Adaugă o umbră de suprapunere la elementul |
| ui-mini | Face elementul mai mic |
Clase Button
În plus față de clase la nivel mondial, puteți adăuga următoarele clase la <a> sau <button> elemente (not <input> buttons) :
| Clasă | Descriere |
|---|---|
| ui-btn | Trebuie să fie adăugate la <a> elemente , dacă doriți ca acestea să fie stil ca butoane |
| ui-btn-inline | Afișează inline butonul |
| ui-btn-icon-top | Poziții pictograma de mai sus textul butonului |
| ui-btn-icon-right | Poziții pictograma din dreapta textului butonului |
| ui-btn-icon-bottom | Poziții pictograma de mai jos textul butonului |
| ui-btn-icon-left | Poziționează pictograma din partea stângă a textului butonului |
| ui-btn-icon-notext | Afișează numai pictograma |
| ui-btn-a|b | Specifică culoarea butonului. "a" este implicit (fundal gri cu text negru), în timp ce "b" se va schimba culoarea la un fundal negru cu text alb |
Clase icon
Toate clasele icon disponibile pentru <a> și <button> elemente ( a se vedea Pictograme de referință pentru modul de utilizare a icoanelor pe alte elemente):
| Clasă | pictogramă Descriere | icoană |
|---|---|---|
| ui-icon-action | Acțiune (arrow arcing clockwise out of a box) de (arrow arcing clockwise out of a box) - (arrow arcing clockwise out of a box) | |
| ui-icon-alert | semn de exclamare în interiorul unui triunghi | |
| ui-icon-audio | Sunet / Difuzoare | |
| ui-icon-arrow-d-l | Jos, săgeata spre stânga | |
| ui-icon-arrow-d-r | Jos, săgeată dreapta | |
| ui-icon-arrow-u-l | Sus, săgeata spre stânga | |
| ui-icon-arrow-u-r | Sus, săgeată dreapta | |
| ui-icon-arrow-l | Sageata stanga | |
| ui-icon-arrow-r | Sageata dreapta | |
| ui-icon-arrow-u | Săgeata în sus | |
| ui-icon-arrow-d | Sageata in jos | |
| ui-icon-back | Înapoi (curved arrow arcing counterclockwise upwards) în (curved arrow arcing counterclockwise upwards) de (curved arrow arcing counterclockwise upwards) | |
| ui-icon-bars | Trei bare orizontale unul deasupra celuilalt, | |
| ui-icon-bullets | Trei gloanțe orizontale peste reciproc | |
| ui-icon-calendar | Calendar | |
| ui-icon-camera | aparat foto | |
| ui-icon-carat-d | carate în jos | |
| ui-icon-carat-l | carate stânga | |
| ui-icon-carat-r | carate dreapta | |
| ui-icon-carat-u | Up carate | |
| ui-icon-check | Bifează marcajul | |
| ui-icon-clock | Ceas | |
| ui-icon-cloud | Nor | |
| ui-icon-comment | Comentariu / Mesaj | |
| ui-icon-delete | Șterge | |
| ui-icon-edit | Editare / Creion | |
| ui-icon-eye | ochi | |
| ui-icon-forbidden | semn Forbidden | |
| ui-icon-forward | Forward - (curved arrow arcing clockwise upwards) în (curved arrow arcing clockwise upwards) cu (curved arrow arcing clockwise upwards) în (curved arrow arcing clockwise upwards) | |
| ui-icon-gear | Angrenaj | |
| ui-icon-grid | Grilă | |
| ui-icon-heart | Inima / simbol Dragoste | |
| ui-icon-home | Casă acasă | |
| ui-icon-info | informație | |
| ui-icon-location | Locație | |
| ui-icon-lock | Blocare / Lacăt | |
| ui-icon-mail | Mail / Scrisoare | |
| ui-icon-minus | Semnul minus | |
| ui-icon-navigation | Navigare | |
| ui-icon-phone | Telefon | |
| ui-icon-power | Putere (On/off) | |
| ui-icon-plus | Semnul plus | |
| ui-icon-recycle | semn de reciclare | |
| ui-icon-refresh | Refresh - săgeată circulară | |
| ui-icon-search | Căutare / Lupă | |
| ui-icon-shop | Shop / Bag | |
| ui-icon-star | Stea | |
| ui-icon-tag | Etichetă | |
| ui-icon-user | Utilizator / O persoană | |
| ui-icon-video | Cameră video |
Tema ore
jQuery Mobile oferă două clase tematice: a (gray) și b (black) . Cu toate acestea, puteți crea , de asemenea , valorile clasei proprii, personalizate - tot drumul până la litera "z" (See the Themes chapter) A se (See the Themes chapter) . Tabelul de mai jos listează clasele tematice disponibile. Literele (az) înseamnă că puteți specifica o scrisoare de la a la z. De exemplu: ui-bar-a sau ui-bar-b , etc.
| Clasă | Descriere |
|---|---|
| ui-bar-(a-z) | Specifică culoarea pentru un bar - footere și alte bare |
| ui-body-(a-z) | Specifică culoarea pentru un conținut de bloc - panouri conținutul paginii (depreciat în versiunea 1.4.0), articole listview, collapsibles,, pop-up încărcător, diapozitivele și panouri |
| ui-btn-(a-z) | Specifică culoarea pentru un buton (and icon) |
| ui-group-theme-(a-z) | Specifică culoarea pentru controlgroups, listviews și seturi pliabile |
| ui-overlay-(a-z) | Specifică culoarea de fundal a paginii care dialogul, pop-up și alte recipiente de pagină apare în partea de sus |
| ui-page-theme-(a-z) | Specifică culoarea pentru pagini |
Clase Grid
Coloanele într - o grilă sunt de lățime egală (and 100% wide in total) , fără chenar, fundal, marja sau padding. Există cinci grile de aspect care pot fi utilizate:
| Grid Clasa | coloane | lățimile coloanelor | Corespunde | Exemplu |
|---|---|---|---|---|
| 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 |
Pentru mai multe informații despre grile, citiți jQuery Mobile Grid Capitolul .