jQuery Mobile Tata Letak Grids
jQuery Mobile menyediakan satu set layout kolom berbasis CSS. Namun, layout kolom umumnya tidak dianjurkan pada perangkat mobile, karena lebar layar mobile.
Tapi ada saat Anda ingin posisi elemen yang lebih kecil, seperti tombol atau tab navigasi, sisi-by-side seperti apakah itu di meja. Kemudian, kolom yang sempurna.
Kolom dalam kotak yang lebar sama (dan lebar 100% total), tanpa border, background, margin atau padding .
Ada lima grid layout yang dapat digunakan:
| Grid Kelas | kolom | Lebar kolom | Sesuai dengan | Contoh |
|---|---|---|---|---|
| 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 |
Dalam wadah kolom, elemen anak dapat memiliki kelas ui-block-a|b|c|d|e , tergantung pada jumlah kolom. Kolom akan mengapung side-by-side.
Contoh 1: Untuk ui-grid-kelas (yang merupakan tata letak dua kolom), Anda harus menentukan dua elemen anak dari ui-block-a dan ui-block-b .
Contoh 2: Untuk ui-grid-b (tata letak tiga kolom), menambahkan tiga elemen anak dari ui-block-a, ui-block-b dan ui-block-c .
Sesuaikan Grids
Anda dapat menyesuaikan blok kolom dengan menggunakan CSS:
Contoh
<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>
Cobalah sendiri " Anda juga dapat menyesuaikan blok Anda dengan menggunakan gaya inline:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
beberapa Baris
Hal ini juga memungkinkan untuk memiliki memiliki beberapa baris dalam kolom Anda.
Catatan: ui-block-a-class akan selalu membuat baris baru:
Contoh
<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>
Cobalah sendiri " Grids responsif
Pada layar kecil, tidak dianjurkan untuk memiliki terlalu banyak tombol dengan side-by-side teks pada satu baris - sebagai teks mungkin akan dipersingkat.
Untuk grid responsif, menambahkan kelas ui-responsif terhadap wadah: