jQuery CSS Sınıfları
jQuery Mobile farklı unsurları stil CSS Sınıfları kullanın.
Aşağıdaki referans listesi için ortak stilleri için CSS sınıflarını dahil ettik.
Küresel Sınıflar
Bu sınıflar herhangi jQuery Mobile widget (eklenebilir buttons, toolbars, panels, tables, lists , vb ..):
| Sınıf | Açıklama |
|---|---|
| ui-corner-all | elemanına yuvarlatılmış köşeleri ekler |
| ui-shadow | elemana gölge ekler |
| ui-overlay-shadow | elemanına bir katlamalı gölge ekler |
| ui-mini | eleman daha küçük yapar |
Düğme Sınıflar
Küresel sınıflara ek olarak, aşağıdaki sınıfları ekleyebilir <a> veya <button> elementler (not <input> buttons) :
| Sınıf | Açıklama |
|---|---|
| ui-btn | Eklenmelidir <a> bunları düğmeler olarak tarz istiyorsanız unsurları |
| ui-btn-inline | düğme inline görüntüler |
| ui-btn-icon-top | düğme metni yukarıdaki simgeyi Pozisyonlar |
| ui-btn-icon-right | düğme metni sağındaki simgeyi Pozisyonlar |
| ui-btn-icon-bottom | düğme metni aşağıdaki simgeyi Pozisyonlar |
| ui-btn-icon-left | düğme metni solundaki simgeyi Pozisyonlar |
| ui-btn-icon-notext | Sadece simge görüntüler |
| ui-btn-a|b | düğmenin rengini belirtir. "a" ise varsayılan, (siyah metin ile gri arka plan) ise "b" beyaz metin ile siyah arka plana rengi değişir |
Simge Sınıflar
Tüm mevcut simge sınıfları <a> ve <button> elemanlar (bkz Simgeler Referans diğer elemanlar simgeleri nasıl kullanılacağı için):
| Sınıf | Simge Açıklama | ikon |
|---|---|---|
| ui-icon-action | Eylem (arrow arcing clockwise out of a box) | |
| ui-icon-alert | Bir üçgen içerisindeki ünlem işareti | |
| ui-icon-audio | Ses / Hoparlörler | |
| ui-icon-arrow-d-l | Sol Aşağı ok | |
| ui-icon-arrow-d-r | Sağ Aşağı ok | |
| ui-icon-arrow-u-l | Sol Yukarı ok | |
| ui-icon-arrow-u-r | Sağ Yukarı ok | |
| ui-icon-arrow-l | Sol ok | |
| ui-icon-arrow-r | Sağ ok | |
| ui-icon-arrow-u | Yukarı ok | |
| ui-icon-arrow-d | Aşağı ok | |
| ui-icon-back | Geri (curved arrow arcing counterclockwise upwards) | |
| ui-icon-bars | birbirleri üzerinde üç yatay çubuklar | |
| ui-icon-bullets | birbirleri üzerinde üç yatay mermi | |
| ui-icon-calendar | Takvim | |
| ui-icon-camera | Kamera | |
| ui-icon-carat-d | Aşağı kırat | |
| ui-icon-carat-l | Sol kırat | |
| ui-icon-carat-r | Sağ kırat | |
| ui-icon-carat-u | karat yukarı | |
| ui-icon-check | Onay işareti | |
| ui-icon-clock | Saat | |
| ui-icon-cloud | Bulut | |
| ui-icon-comment | Yorum / Mesaj | |
| ui-icon-delete | silmek | |
| ui-icon-edit | Düzenleme / Kalem | |
| ui-icon-eye | Göz | |
| ui-icon-forbidden | Yasak işareti | |
| ui-icon-forward | İleri - (curved arrow arcing clockwise upwards) | |
| ui-icon-gear | vites | |
| ui-icon-grid | ızgara | |
| ui-icon-heart | Kalp / Sevgi sembolü | |
| ui-icon-home | Ev | |
| ui-icon-info | Bilgi | |
| ui-icon-location | yer | |
| ui-icon-lock | Kilit / Kilit | |
| ui-icon-mail | Posta / Letter | |
| ui-icon-minus | Eksi işareti | |
| ui-icon-navigation | Navigasyon | |
| ui-icon-phone | Telefon | |
| ui-icon-power | Güç (On/off) | |
| ui-icon-plus | Artı işareti | |
| ui-icon-recycle | Geri Dönüşüm işareti | |
| ui-icon-refresh | Yenile - Dairesel ok | |
| ui-icon-search | Ara / Büyüteç | |
| ui-icon-shop | Mağaza / Çanta | |
| ui-icon-star | Star | |
| ui-icon-tag | Etiket | |
| ui-icon-user | Kullanıcı / Bir kişi | |
| ui-icon-video | Video kamera |
Tema Sınıfları
Bir: jQuery Mobile iki tema sınıfları sağlar (gray) ve b (black) . Ancak, aynı zamanda kendi özel sınıf değerlerini oluşturabilirsiniz - tüm yol harfine kadar "z" (See the Themes chapter) . Aşağıdaki tabloda mevcut tema sınıfları listeler. Harfler (az) Eğer a dan z ye bir mektup belirtebilirsiniz anlamına gelir. Örneğin: ui-bar-a ya da ui-bar-b , vs.
| Sınıf | Açıklama |
|---|---|
| ui-bar-(a-z) | üst bilgi, alt ve diğer barlar - bir bar rengini belirtir |
| ui-body-(a-z) | (1.4.0 sürümü içinde kullanımdan kaldırıldı) sayfa içeriği bölmeleri, liste görünümü öğeleri, pop-up, collapsibles, yükleyici, sürgü, ve paneller - bir içerik bloğu rengini belirtir |
| ui-btn-(a-z) | Bir düğme için rengini belirtir (and icon) |
| ui-group-theme-(a-z) | controlgroups, liste görünümündeki ve katlanabilir setleri için rengini belirtir |
| ui-overlay-(a-z) | iletişim, pop-up ve diğer sayfa kaplar üstünde görünen sayfanın arka plan rengini belirtir |
| ui-page-theme-(a-z) | sayfaları için rengini belirtir |
Izgara Sınıflar
Bir ızgara sütunlar aynı genişlikte olan (and 100% wide in total) bir sınır, arka, kenar boşluğu ya da dolgu ile. kullanılabilecek beş düzen ızgaraları vardır:
| Izgara Sınıf | Sütunlar | Sütun genişlikleri | To karşılık gelir | Örnek |
|---|---|---|---|---|
| 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 |
Izgaraları hakkında daha fazla bilgi için lütfen okuyunuz jQuery Mobile Izgaralar Bölüm .