jQuery Mobile Düzeni Izgaralar
jQuery Mobile CSS tabanlı sütun düzeninden kümesi sağlar. Ancak, sütun düzenleri genellikle, cep telefonunun ekran genişliğine, bir mobil cihazda tavsiye edilmez.
Ama yan-yana bir tabloda sanki, düğmeler veya gezinme sekmeleri gibi küçük elemanlar, konumlandırmak istediğiniz zamanlar vardır. Ardından, sütunlar idealdir.
Bir ızgara sütunlar aynı genişlikte olan (and 100% wide in total) bir ile border, background, margin ya da padding .
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 |
Kolon, kabın içinde, alt öğeleri sınıfı olabilir ui-block-a|b|c|d|e sütun sayısına bağlı olarak,. sütunları yan-yana yüzer.
Örnek 1: ui-ızgara bir sınıf (iki sütun düzeni olan) için, iki alt öğeleri belirtmek gerekir ui-block-a ve ui-block-b .
Örnek 2: için ui-grid-b (three-column layout) , üç alt öğeleri eklemek ui-block-a, ui-block-b ve ui-block-c .
Izgaralar özelleştirme
Sen CSS kullanarak sütun blokları ö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>
Kendin dene " Ayrıca satır içi stilleri kullanarak blokları özelleştirebilirsiniz:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
Çoklu Satırlar
Sizin sütunların içinde birden fazla satır var olması da mümkündür.
Not: ui-block-a-class daima yeni bir 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>
Kendin dene " duyarlı Izgaralar
küçük ekranlarda, bir satırda metin yan yana olan çok fazla düğme olması tavsiye edilmez - metin kısaltılır edebileceğiniz gibi.
Duyarlı ızgaraları için, kaba ui duyarlı sınıfını ekleyin: