jQuery Mobile Tables

jQuery Mobile Tables

A. Responsive table

•Responsive design akan bekerja ketika ingin melihat tampilan konten web pada mobile device yang berbeda. Di Jquery Mobile untuk membuat table menjadi responsive merupaka hal yang mudah dikarenakan Jquery mobile telah mendukung fungsi responsive yang berasal dari class sederhana. Responsive table akan memberikan tampilan yang lebih atraktif untuk mobile dan desktop. Ada 2 tipe responsive table yaitu:

1.Reflow

2.Column toggle

1. Reflow Table

•Reflow Table akan membuat tampilan table horizontal sampai pada minimum screen maka semua row akan menjadi grup dan di tampilkan secara vertikal. Untuk membuat sebuah reflow table tambahan data-role=“table” dan class = “ui-responsive”.

•

Coding Structur Halaman Jquery Mobile sebagai     Berikut

Dan buat lah sebuah table yang terdiri dari 5 buah baris didalam elemen <div> main Seperti berikut

Simpan kode jQuery mobile dan jalankan pada browser. Untuk melihat efek reflow silahkan resize ukuran layar atau menggunakan HP