jQuery Mobile - CSS Sınıfları
jQuery CSS Sınıfları
Öğeleri aşağıdaki bölümlerde anlatıldığı gibi biçimlendirmek için farklı CSS sınıfı türleri kullanabilirsiniz.
Global Sınıflar
Aşağıdaki sınıflar jQuery Mobile widget'larında genel sınıflar olarak kullanılabilir -
| Sr.No. | Sınıf ve Açıklama |
|---|---|
| 1 | ui-corner-all Öğeleri yuvarlatılmış köşeli görüntüler. |
| 2 | ui-shadow Öğelerin gölgesini görüntüler. |
| 3 | ui-overlay-shadow Öğeler için bindirme gölgesini görüntüler. |
| 4 | ui-mini Daha küçük öğeleri görüntüler. |
Düğme Sınıfları
Aşağıdaki tablo, bağlantı veya düğme öğeleriyle kullanılan düğme sınıflarını listeler -
| Sr.No. | Sınıf ve Açıklama |
|---|---|
| 1 | ui-btn Öğenin düğme olarak stilize edileceğini belirtir. |
| 2 | ui-btn-inline Düğmeyi, etiket için gerektiği gibi alan tasarrufu sağlayan satır içi öğe olarak gösterir. |
| 3 | ui-btn-icon-top Simgeyi metnin üstüne yerleştirir. |
| 4 | ui-btn-icon-right Simgeyi metnin sağına yerleştirir. |
| 5 | ui-btn-icon-bottom Simgeyi metnin altına yerleştirir. |
| 6 | ui-btn-icon-left Simgeyi metnin soluna yerleştirir. |
| 7 | ui-btn-icon-notext Tek simgeyi gösterir. |
| 8 | ui-btn-a|b Düğmenin rengini gösterir ("a" varsayılan arka plan rengi olacaktır, yani gri ve "b" arka plan rengini siyah olarak değiştirecektir). |
Simge Sınıfları
Aşağıdaki tablo, bağlantı veya düğme öğeleriyle kullanılan simge sınıflarını listeler -
| Sr.No. | Sınıf ve Açıklama |
|---|---|
| 1 | ui-icon-action Eylem simgesini gösterir. |
| 2 | ui-icon-alert Üçgen içinde ünlem işareti görüntüler. |
| 3 | ui-icon-arrow-d-l Sol ok ile aşağıyı belirtir. |
| 4 | ui-icon-arrow-d-r Sağ ok ile aşağıyı belirtir. |
| 5 | ui-icon-arrow-u-l Sol ok ile yukarı belirtir. |
| 6 | ui-icon-arrow-u-r Sağ ok ile yukarı belirtir. |
| 7 | ui-icon-arrow-l Sol oku belirtir. |
| 8 | ui-icon-arrow-r Sağ oku belirtir. |
| 9 | ui-icon-arrow-u Yukarı oku belirtir. |
| 10 | ui-icon-arrow-d Aşağı oku belirtir. |
| 11 | ui-icon-bars 3 yatay çubuğu üst üste gösterir. |
| 12 | ui-icon-bullets Üst üste 3 yatay mermiyi gösterir. |
| 13 | ui-icon-carat-d Karatı aşağıya doğru gösterir. |
| 14 | ui-icon-carat-l Karatı sola doğru gösterir. |
| 15 | ui-icon-carat-r Karat'ı sağa doğru gösterir. |
| 16 | ui-icon-carat-u Karat'ı yukarı gösterir. |
| 17 | ui-icon-check Onay işareti simgesini gösterir. |
| 18 | ui-icon-comment Yorumu veya mesajı belirtir. |
| 19 | ui-icon-forbidden Yasak ikonu gösterir. |
| 20 | ui-icon-forward Yönlendirme simgesini belirtir. |
| 21 | ui-icon-navigation Gezinme simgesini belirtir. |
| 22 | ui-icon-recycle Geri dönüşüm simgesini görüntüler. |
| 23 | ui-icon-refresh Yenileme simgesini gösterir. |
| 24 | ui-icon-tag Etiket simgesini belirtir. |
| 25 | ui-icon-video Video veya kamera simgesini belirtir. |
Tema Dersleri
Uygulamanın görünümünü özelleştirmek için tema "a" ve tema "b" gibi iki farklı tema türü sağlar. Renk örneği harfi (az) ekleyerek kendi tema sınıflarınızı oluşturabilirsiniz. Aşağıdaki tablo, a harfinden z'ye kadar belirtilen tema sınıflarını listeler.
| Sr.No. | Sınıf ve Açıklama |
|---|---|
| 1 | ui-bar-(a-z) Sayfadaki üstbilgiler, altbilgiler ve diğer çubuklar dahil olmak üzere çubuğun rengini görüntüler. |
| 2 | ui-body-(a-z) Liste görünümü, açılır pencereler, kaydırıcılar, paneller, yükleyiciler vb. Dahil içerik bloğunun rengini görüntüler. |
| 3 | ui-btn-(a-z) Düğme rengini gösterir. |
| 4 | ui-group-theme-(a-z) Kontrol grupları, liste görünümleri ve daraltılabilir kümeler için rengi görüntüler. |
| 5 | ui-overlay-(a-z) Açılır pencere, iletişim kutusu ve sayfa kapsayıcıları için arka plan rengini görüntüler. |
| 6 | ui-page-theme-(a-z) Sayfaların rengini görüntüler. |
Izgara Sınıfları
Aşağıdaki tablo, eşit genişlikte, kenarlık, arka plan, kenar boşluğu veya dolgu olmadan kullanılan ızgara sınıflarını listeler.
| Sr.No. | Izgara Sınıfı | Sütunlar | Sütun Genişlikleri | Karşılık gelen |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-blok-a |
| 2 | ui-grid-a | 2 | % 50 /% 50 | ui-blok-a | b |
| 3 | ui-grid-b | 3 | % 33 /% 33 /% 33 | ui-blok-a | b | c |
| 4 | ui-grid-c | 4 | % 25 /% 25 /% 25 /% 25 | ui-blok-a | b | c | d |
| 5 | ui-grid-d | 5 | % 20 /% 20 /% 20 /% 20 /% 20 | ui-blok-a | b | c | d | e |