Grid jQuery Mobile

Grid Layout jQuery Mobile

jQuery Mobile menyediakan solusi layout kolom yang berdasarkan CSS. Namun, umumnya tidak disarankan untuk menggunakan layout kolom di perangkat bergerak, karena batasan lebar layar perangkat bergerak.

Namun kadang-kadang Anda memerlukan lokasi elemen yang lebih kecil, seperti tombol atau navigasi, seperti di tabel dan mengambang bersama-sama. Pada saat itu, layout kolom sangat sesuai.

Kolom di dalam grid adalah sama lebar (lebar total adalah 100%), tanpa garis batas, latar belakang, margin eksternal atau margin internal.

Ada empat grid layout yang dapat digunakan:

Kelas grid Kolom Lebar kolom Tersesuaikan Contoh
ui-grid-a 2 50% / 50% ui-block-a|b Pengujian
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Pengujian
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Pengujian
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Pengujian

Petunjuk:Dalam kontainer kolom, berdasarkan jumlah kolom yang berbeda, elemen anak dapat diatur kelas ui-block-a|b|c|d|e. Kolom ini akan mengambang bersama-sama secara berurutan.

Contoh 1: Untuk kelas ui-grid-a (layout dua kolom), Anda harus menentukan dua elemen anak ui-block-a dan ui-block-b.

Contoh 2: Untuk kelas ui-grid-b (layout tiga kolom), tambahkan tiga elemen anak ui-block-a, ui-block-b, dan ui-block-c.

Penyesuaian Grid

Anda dapat menyesuaikan blok kolom 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>

Coba Sendiri

Anda juga dapat menyesuaikan blok menggunakan gaya dalam baris:

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

Banyak baris

Dalam kolom yang mengandung beberapa baris juga memungkinkan.

Keterangan:ui-block-a-class selalu akan 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>

Coba Sendiri