jQuery Mobile Grid
jQuery Mobile Grid Tata Letak
jQuery Mobile memberikan rincian dari layout berbasis CSS. Namun, pada perangkat mobile, mengingat lebar layar ponsel yang sempit, umumnya kita tidak merekomendasikan penggunaan kolom layout terpilah.
Tapi kadang-kadang Anda ingin elemen yang lebih kecil (seperti tombol atau tab navigasi) disusun berdampingan bersama-sama, seperti seperti dalam sebuah tabel. Dalam hal ini, dianjurkan untuk menggunakan tata letak sub-kolom.
kolom Grid adalah lebar sama (Total 100%), tidak ada batas, latar belakang, margin atau padding.
Ada empat grid layout yang tersedia:
| kelas Grid | baris | kolom Lebar | korespondensi | contoh |
|---|---|---|---|---|
| ui-grid-sendirian | 1 | 100% | ui-blok-a | mencoba |
| ui-grid-a | 2 | 50% / 50% | ui-blok-a | b | mencoba |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-blok-a | b | c | mencoba |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-blok-a | b | c | d | mencoba |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-blok-a | b | c | d | e | mencoba |
 | Dalam wadah kolom, sub-elemen memiliki kelas sebagai ui-blok-a | b | c | d | e tergantung pada jumlah kolom. Mengambang sisi baris berdampingan. Contoh 1: kelas ui-grid-a (dua layout), Anda harus menentukan ui-blok-a dan ui-blok-b dari dua sub-elemen. Contoh 2: kelas ui-grid-b (tiga layout), Anda harus menambahkan ui-blok-a, UI- blok-b dan ui-blok-c dari tiga sub-elemen. |
|---|
kustom Grid
Dengan menggunakan CSS, Anda dapat menyesuaikan blok kolom:
contoh
Ui-blok-a, Ui-blok-b, Ui-blok-c {
background-color: lightgray;
border: 1px solid hitam;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
Coba »
Anda juga dapat menyesuaikan menggunakan blok gaya inline:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multisaluran
Dalam kolom, Anda juga dapat memiliki beberapa baris.
Catatan: ui-blok-a-kelas selalu membuat baris baru:
contoh
<Class Div = "ui-blok-a"> <span> beberapa teks </ span> </ div>
<Class Div = "ui-blok-b"> <span> beberapa teks </ span> </ div>
<Class Div = "ui-blok-c"> <span> beberapa teks </ span> </ div>
<Class Div = "ui-blok-a"> <span> beberapa teks </ span> </ div>
<Class Div = "ui-blok-b"> <span> beberapa teks </ span> </ div>
<Class Div = "ui-blok-a"> <span> beberapa teks </ span> </ div>
</ Div>
Coba »
Grid responsif
Di layar kecil, terlalu banyak tidak dianjurkan di sisi berturut-turut oleh tombol samping (teks singkat).
Kami membuat kotak responsif untuk digunakan dalam wadah ui-responsif kategori: