Grid jQuery Mobile

Jaringan Layout jQuery Mobile

jQuery Mobile menyediakan skema layout kolom yang berdasarkan CSS. Walau begitu, umumnya tidak disarankan untuk menggunakan layout kolom di peranti bergerak, disebabkan lebar layar peranti bergerak yang terbatas.

Tetapi kadang-kadang anda memerlukan penempatan elemen yang lebih kecil, seperti tombol atau navigasi, seperti di dalam tabel dan bergerak lurus mendatar. Pada masa itu, layout kolom sangat sesuai.

Kolom di dalam grid adalah sama lebar (lebar keseluruhan adalah 100%), tanpa garis bawah, latar belakang, marjin luar atau marjin dalaman.

Ada empat jenis grid layout yang boleh digunakan:

Kelas Grid Kolom Lebar Kolom berhubungan 实例
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

Panduan:Dalam wadah kolom, berdasarkan jumlah kolom yang berbeda, elemen anak boleh diatur dengan kelas ui-block-a|b|c|d|e. Kolom ini akan bergerak lurus mendatar secara berurutan.

Contoh 1: Untuk kelas ui-grid-a (layout dua kolom), anda mesti tentukan 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.

Rancangan Grid

Anda boleh merancang blok kolom dengan CSS:

实例

<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 boleh merancang blok dengan gaya dalaman:

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

Bercabang

Juga mungkin untuk memasukkan beberapa baris di dalam kolom.

Keterangan：ui-block-a-class ialah selalu mencipta baris baru：

实例

<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