jQuery Mobile (14): Menampilkan Tabel dengan Column Toggle dan Data-Priority

No CSS jQuery Mobile Table

Selanjutnya kita tambahkan CSS sedikit agar lebih manis tampilannya 😀 , masukkan kode berikut di atas tag </head> kemudian simpan dan jalankan lagi filenya.

<style> 
th { 
  border-bottom: 1px solid #FF0000; 
  background: #28e; 
  color: #FFFFFF; 
} 
tr:nth-child(even) { 
  background: #e9e9e9; 
} 
</style>

Seharusnya tampilan tabel sudah lebih cantik, ya kan? Ehemmmm, seperti kamu 😉

CSS jQuery Mobile Table

Perhatikan pada kode di tag <table> ada class yang memanggil definis responsif yaitu class="ui-responsive".  Gunanya untuk menyesuaikan tampilan jika layarnya kecil. Coba dikecilkan layarnya (putar jadi portrait) atau jika pakai browser bisa diubah ukuran jendela browsernya.

Perhatikan perbedaannya antara gambar kedua dengan gambar ketiga berikut ini.

Responsive jQuery Mobile Table

Lanjut ya.

Column Toggle

Dengan beberapa tambahan atribut, kita bisa buat tampilan kolom dari tabel menjadi flexible, maksudnya bisa dipilih mana yang mau ditampilkan mana yang ingin disembunyikan. Ya udah jangan banyak omong, langsung kita praktekkan saja. Save-as dulu latihan yang tadi menjadi jqm_table_column_toggle.html.

Sesuaikan dulu <title> dan teks di bagian <h1> menjadi Table Toggle Columns.

← Sebelumnya Selanjutnya →

Halaman : 1 2 3

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *