jQuery Mobile Ağ

jQuery Mobile Yerleşim Ağı

jQuery Mobile, CSS tabanlı bir sütun düzeni sunar. Ancak, genellikle mobil cihazlarda sütun düzeni kullanılmaz, bu da mobil cihazların ekran genişliklerinin sınırlı olması nedeniyle gereklidir.

Ancak bazen daha küçük elemanları, örneğin düğmeleri veya navigasyon panellerini, tabloda olduğu gibi yan yana yerleştirmeniz gerekebilir. Bu durumda, sütun düzeni tam olarak işe yarar.

Ağdaki sütunlar eş genişliktedir (toplam genişlik 100%), sınırlar, arka plan, dış boşluk veya iç boşluk yoktur.

Kullanılabilir düzen ağı dört türdedir:

ağ sınıfı sütun sütun genişliği karşılaştırma örnek
ui-grid-a 2 50% / 50% ui-block-a|b Test
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Test
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Test
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Test

İpucu:Sütun konteynerinde, farklı sütun sayısına göre, alt öğeler sütun sınıfı ui-block-a|b|c|d|e olarak ayarlanabilir. Bu sütunlar sırasıyla yan yana yüzebilir.

Örnek 1: ui-grid-a sınıfı (iki sütun düzeni) için, iki alt öğe belirtmelisiniz: ui-block-a ve ui-block-b.

Örnek 2: ui-grid-b sınıfı (üç sütun düzeni) için, üç alt öğe ekleyin: ui-block-a, ui-block-b ve ui-block-c.

Ağ tasarımı

CSS kullanarak sütun bloklarını özelleştirebilirsiniz:

örnek

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Kendi Kendine Deneyin

Ayrıca, satır içi stiller kullanarak bloğu özelleştirebilirsiniz:

<div class="ui-block-a" style="border: 1px solid black;"><span>Metin..</span></div>

Çok satır

Sütunda birden fazla satır içermek de mümkündür.

Açıklama:ui-block-a-class her zaman yeni satır oluşturur:

örnek

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

Kendi Kendine Deneyin