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